*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;background:var(--bg);color:var(--ink);overscroll-behavior:none}
body{font-family:var(--font);-webkit-font-smoothing:antialiased;font-variant-numeric:tabular-nums;overflow:hidden;-webkit-user-select:none;user-select:none}
button,input,select{font:inherit;color:inherit;background:none;border:0;-webkit-tap-highlight-color:transparent}
button{cursor:pointer;touch-action:manipulation}
input{-webkit-user-select:text;user-select:text}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:12px}
svg.i{fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
[hidden]{display:none!important}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* app frame: full screen on the phone, centered column on desktop */
.app{position:fixed;inset:0;margin:0 auto;max-width:520px;overflow:hidden;overflow:clip;isolation:isolate;background:var(--bg)}
@media (min-width:560px){.app{box-shadow:0 0 0 1px rgba(207,199,255,.08)}}

/* ambient light */
.ambient{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.ambient i{position:absolute;border-radius:50%;filter:blur(70px);will-change:transform}
.ambient i:nth-child(1){width:320px;height:320px;left:-100px;top:-70px;background:radial-gradient(circle,var(--amb1),transparent 68%);opacity:.6;animation:drift1 34s ease-in-out infinite alternate}
.ambient i:nth-child(2){width:360px;height:360px;right:-150px;top:300px;background:radial-gradient(circle,var(--amb2),transparent 68%);opacity:.5;animation:drift2 41s ease-in-out infinite alternate}
.ambient i:nth-child(3){width:280px;height:280px;left:-70px;bottom:-90px;background:radial-gradient(circle,var(--violet),transparent 68%);opacity:.32;animation:drift1 47s ease-in-out infinite alternate-reverse}
@keyframes drift1{to{transform:translate(70px,60px) scale(1.12)}}
@keyframes drift2{to{transform:translate(-60px,-80px) scale(1.08)}}

/* surfaces */
.glass{background:linear-gradient(180deg,rgba(255,255,255,.075),rgba(255,255,255,.025)),rgba(25,28,37,.55);-webkit-backdrop-filter:blur(26px) saturate(150%);backdrop-filter:blur(26px) saturate(150%);border:1px solid var(--line);box-shadow:0 22px 44px -14px rgba(0,0,0,.65),inset 0 1px 0 rgba(255,255,255,.08)}
.solid{background:rgba(25,28,37,.72);border:1px solid var(--line);box-shadow:0 10px 24px -12px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.04)}

/* screens */
.screen{position:absolute;inset:0;z-index:1;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;padding:calc(var(--safe-top) + 4px) 20px calc(var(--dock-bottom) + var(--dock-h) + 28px);opacity:0;visibility:hidden;transform:scale(.985);transition:opacity .4s var(--ease),transform .6s var(--ease),visibility 0s .4s;scrollbar-width:none}
.screen::-webkit-scrollbar{display:none}
.screen.on{opacity:1;visibility:visible;transform:none;transition:opacity .4s var(--ease),transform .6s var(--ease)}
.app.has-mini .screen{padding-bottom:calc(var(--dock-bottom) + var(--dock-h) + 88px)}

.top{display:flex;align-items:center;justify-content:space-between;height:44px;gap:10px}
.iconbtn{width:40px;height:40px;flex:none;border-radius:14px;display:grid;place-items:center;background:rgba(255,255,255,.05);border:1px solid var(--line);transition:transform .3s var(--ease),background .3s}
.iconbtn:active{transform:scale(.94)}
.iconbtn svg{width:20px;height:20px}
.iconbtn[disabled]{opacity:.35;pointer-events:none}
.ttl{text-align:center;line-height:1.2;min-width:0}
.ttl strong{display:block;font-size:16px;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ttl span{font-size:13px;color:var(--muted);font-weight:600}
.pillbtn{height:40px;padding:0 16px;border-radius:999px;background:rgba(var(--a-rgb),.14);color:var(--accent);font-weight:800;font-size:14px;border:1px solid rgba(var(--a-rgb),.22);flex:none;transition:transform .3s var(--ease)}
.pillbtn:active{transform:scale(.95)}
.spacer{width:40px;flex:none}

/* workout */
.exhead{margin-top:14px;display:flex;align-items:flex-end;gap:10px}
.exhead .txt{flex:1;min-width:0}
.exhead p{font-size:14px;color:var(--muted);font-weight:600}
.exhead h1{font-size:36px;line-height:1.08;font-weight:800;letter-spacing:-.03em;margin:2px 0 3px;overflow-wrap:anywhere}
.exhead h1 button{text-align:left;font-weight:inherit;letter-spacing:inherit;line-height:inherit}
.exnav{display:flex;gap:6px;padding-bottom:4px}
.hero{margin-top:14px;padding:16px;border-radius:30px;position:relative}
.hero::before{content:"";position:absolute;left:12%;right:12%;top:34px;height:96px;background:radial-gradient(closest-side,rgba(var(--a-rgb),.26),transparent);filter:blur(16px);z-index:-1;pointer-events:none}
.cols{display:grid;grid-template-columns:1fr 22px 1fr;align-items:end}
.col{display:flex;flex-direction:column;align-items:center;gap:6px;min-width:0}
.lab{font-size:13px;font-weight:700;color:var(--muted)}
.row3{display:flex;align-items:center;gap:6px;width:100%;justify-content:center}
.num{font-size:50px;height:56px;line-height:1;font-weight:800;letter-spacing:-.04em;flex:1;width:0;min-width:0;max-width:110px;text-align:center;font-variant-numeric:tabular-nums;border-radius:12px;padding:2px 0;caret-color:var(--accent)}
.num:focus{outline:none;background:rgba(var(--a-rgb),.1)}
.step{width:34px;height:34px;flex:none;border-radius:12px;background:rgba(255,255,255,.06);border:1px solid var(--line);font-size:20px;line-height:1;font-weight:700;display:grid;place-items:center;transition:transform .25s var(--ease),background .25s}
.step:active{transform:scale(.9);background:rgba(var(--a-rgb),.16)}
.times{font-size:20px;color:var(--dim);font-weight:700;text-align:center;padding-bottom:14px}
.ghost{margin-top:12px;display:flex;justify-content:space-between;gap:10px;font-size:13px;color:var(--muted);font-weight:600}
.ghost b{color:var(--ink);font-weight:700}
.log{margin-top:12px;width:100%;height:50px;padding:0 18px;border-radius:18px;display:flex;align-items:center;justify-content:center;gap:8px;background:linear-gradient(180deg,var(--accent),var(--accent));color:var(--accent-ink);font-weight:800;font-size:16px;white-space:nowrap;box-shadow:0 12px 30px -8px rgba(var(--a-rgb),.6),inset 0 1px 0 rgba(255,255,255,.65);transition:transform .3s var(--ease),box-shadow .3s}
.log:active{transform:scale(.97)}
.log svg{width:18px;height:18px}
.btn2{width:100%;height:50px;padding:0 18px;border-radius:18px;display:flex;align-items:center;justify-content:center;gap:8px;font-weight:800;font-size:15px;transition:transform .3s var(--ease)}
.btn2:active{transform:scale(.97)}
.btn2 svg{width:18px;height:18px;color:var(--accent)}
.btn2.danger{color:var(--danger)}
.btn2.danger svg{color:var(--danger)}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:14px}

.rest{margin-top:12px;padding:12px 14px;border-radius:22px;display:flex;align-items:center;gap:14px;transform-origin:top center}
.rest.in{animation:restin .5s var(--ease)}
.rest.out{animation:restout .35s var(--ease) forwards}
@keyframes restin{from{opacity:0;transform:translateY(-6px) scale(.98)}}
@keyframes restout{to{opacity:0;transform:translateY(-6px) scale(.98)}}
.ring{position:relative;width:60px;height:60px;flex:none}
.ring svg{width:60px;height:60px;transform:rotate(-90deg);overflow:visible}
.ring circle{fill:none;stroke-width:5;stroke-linecap:round}
.ring .bg{stroke:rgba(255,255,255,.08)}
.ring .fg{stroke:url(#rg);stroke-dasharray:157.08;transition:stroke-dashoffset .25s linear}
.ring b{position:absolute;inset:0;display:grid;place-items:center;font-size:14px;font-weight:800;letter-spacing:-.02em}
.ring.hot{animation:hot .5s ease-in-out infinite alternate}
@keyframes hot{to{transform:scale(1.07);filter:drop-shadow(0 0 8px rgba(var(--a-rgb),.7))}}
.rtxt{flex:1;line-height:1.25;min-width:0}
.rtxt strong{display:block;font-size:16px;font-weight:800}
.rtxt span{font-size:13px;color:var(--muted);font-weight:600;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.chips{display:flex;gap:6px}
.chip{height:34px;padding:0 12px;border-radius:999px;background:rgba(255,255,255,.06);border:1px solid var(--line);font-weight:700;font-size:13px;display:inline-flex;align-items:center;white-space:nowrap;transition:transform .25s var(--ease),background .25s}
button.chip:active{transform:scale(.93);background:rgba(var(--a-rgb),.16)}

.sets{list-style:none;margin-top:12px;display:grid;gap:6px}
.sw{position:relative;border-radius:16px;overflow:hidden;touch-action:pan-y}
.sw .del{position:absolute;inset:0;display:flex;align-items:center;justify-content:flex-end;padding-right:18px;background:rgba(255,138,154,.16);color:var(--danger);font-weight:800;font-size:13px;gap:6px;opacity:0;transition:opacity .2s}
.sw .del svg{width:18px;height:18px}
.sw.dragging .del,.sw.gone .del{opacity:1}
.sw.gone{animation:gone .32s var(--ease) forwards}
@keyframes gone{to{opacity:0;transform:translateX(-30px)}}
.set{position:relative;height:44px;border-radius:16px;padding:0 14px;display:grid;grid-template-columns:26px 1fr auto;align-items:center;background:rgba(255,255,255,.035);border:1px solid transparent;font-size:15px;font-weight:600;color:var(--muted);width:100%;text-align:left;transition:transform .45s var(--ease)}
.sw.dragging .set{transition:none}
.sw.dragging .set,.sw.gone .set{background:#1B1E28}
.set .idx{font-weight:800;color:var(--dim)}
.set .val b{color:var(--ink);font-weight:800}
.set.done{color:var(--ink)}
.set.done .idx{color:var(--accent)}
.set .end{display:flex;align-items:center;gap:8px}
.ck{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;background:var(--accent);color:var(--accent-ink)}
.ck svg{width:13px;height:13px;stroke-width:3}
.set.planned{border:1px dashed rgba(207,199,255,.16);background:transparent}
.set .later{font-size:12.5px;color:var(--dim);font-weight:700}
.set.fresh{animation:land 1.6s var(--ease)}
.set.fresh .ck{animation:pop .6s var(--ease)}
@keyframes land{0%{background:rgba(var(--a-rgb),.3);border-color:rgba(var(--a-rgb),.55)}40%{background:rgba(var(--a-rgb),.1);border-color:rgba(var(--a-rgb),.12)}100%{background:rgba(255,255,255,.035);border-color:transparent}}
@keyframes pop{0%{opacity:0;transform:scale(.4)}50%{opacity:1;transform:scale(1.25)}100%{transform:scale(1)}}
.tag{display:inline-block;height:24px;line-height:24px;padding:0 10px;border-radius:999px;background:rgba(255,217,168,.14);color:var(--warm);font-size:12.5px;font-weight:800;white-space:nowrap}
.tag.sm{height:20px;line-height:20px;padding:0 8px;font-size:11.5px}
.hint{margin-top:10px;text-align:center;font-size:12.5px;color:var(--dim);font-weight:600}

/* empty states */
.empty{margin-top:20px;padding:22px 18px;border-radius:26px;text-align:center}
.empty h2{font-size:22px;font-weight:800;letter-spacing:-.02em}
.empty p{margin-top:6px;font-size:14px;color:var(--muted);font-weight:600;line-height:1.4}
.empty .log,.empty .btn2{margin-top:16px}
.emptyglyph{width:56px;height:56px;margin:0 auto 12px;border-radius:20px;display:grid;place-items:center;background:rgba(var(--a-rgb),.12);color:var(--accent)}
.emptyglyph svg{width:26px;height:26px}

/* today */
.tabtop{height:44px}
.brand{display:flex;align-items:center;justify-content:space-between;height:44px}
.brand strong{display:block;font-size:20px;font-weight:800;letter-spacing:-.02em}
.brand span{display:block;font-size:12.5px;color:var(--muted);font-weight:600;line-height:1.2}
.greet{margin-top:14px;font-size:34px;line-height:1.1;font-weight:800;letter-spacing:-.03em}
.sub{color:var(--muted);font-weight:600;font-size:15px;margin-top:4px}
.upcoming{margin-top:16px;padding:18px;border-radius:30px;position:relative}
.upcoming::before{content:"";position:absolute;right:-10px;top:-10px;width:150px;height:150px;background:radial-gradient(closest-side,rgba(var(--v-rgb),.4),transparent);filter:blur(14px);z-index:-1;pointer-events:none}
.upcoming h2{font-size:28px;font-weight:800;letter-spacing:-.025em;line-height:1.1}
.upcoming p{font-size:14px;color:var(--muted);font-weight:600;margin-top:3px}
.upcoming .live{display:inline-flex;align-items:center;gap:8px;margin-bottom:10px;font-size:13px;font-weight:800;color:var(--accent)}
.upcoming .live i{width:8px;height:8px;border-radius:50%;background:var(--accent);animation:mic 1.4s infinite}
@keyframes mic{0%{box-shadow:0 0 0 0 rgba(var(--a-rgb),.6)}70%,100%{box-shadow:0 0 0 9px rgba(var(--a-rgb),0)}}
.exlist{display:flex;gap:6px;margin:14px 0 16px;flex-wrap:wrap}
.card{margin-top:12px;border-radius:22px}
.routine{padding:14px 16px;display:flex;align-items:center;gap:12px;width:100%;text-align:left}
.routine .l{flex:1;min-width:0}
.routine strong{display:block;font-size:17px;font-weight:800}
.routine span{display:block;font-size:13px;color:var(--muted);font-weight:600;margin-top:2px}

/* history */
.h1{margin-top:14px;font-size:34px;line-height:1.1;font-weight:800;letter-spacing:-.03em}
.group{margin-top:22px;font-size:13px;font-weight:800;color:var(--muted);letter-spacing:.02em}
.hlist{list-style:none;display:grid;gap:10px;margin-top:10px}
.hitem{width:100%;padding:14px 16px;border-radius:22px;text-align:left;display:grid;grid-template-columns:1fr auto;gap:4px 12px;align-items:center;transition:transform .3s var(--ease)}
.hitem:active{transform:scale(.98)}
.hitem strong{font-size:17px;font-weight:800;letter-spacing:-.01em}
.hitem .d{font-size:13px;color:var(--muted);font-weight:600;grid-column:1}
.hitem .tag{grid-row:1;grid-column:2;justify-self:end}
.hitem .stats{grid-column:1/-1;display:flex;gap:14px;margin-top:8px;font-size:13px;color:var(--muted);font-weight:600}
.hitem .stats b{color:var(--ink);font-weight:800}
.summary{margin-top:14px;padding:16px;border-radius:30px;display:grid;grid-template-columns:repeat(3,1fr);position:relative}
.summary::before{content:"";position:absolute;left:12%;right:12%;top:10px;height:70px;background:radial-gradient(closest-side,rgba(var(--a-rgb),.22),transparent);filter:blur(16px);z-index:-1;pointer-events:none}
.summary div{text-align:center}
.summary b{display:block;font-size:24px;font-weight:800;letter-spacing:-.03em}
.summary span{font-size:12.5px;color:var(--muted);font-weight:700}
.prs{margin-top:12px;padding:14px 16px;border-radius:22px}
.prs ul{list-style:none;display:grid;gap:10px;margin-top:10px}
.prs li{display:flex;justify-content:space-between;gap:10px;font-size:14px;font-weight:600;color:var(--muted)}
.prs li b{color:var(--ink);font-weight:800}
.prs li .v{color:var(--warm);font-weight:800;white-space:nowrap}
.exblock{margin-top:12px;padding:14px 16px;border-radius:22px}
.exblock h3{font-size:16px;font-weight:800}
.exblock ol{list-style:none;margin-top:8px;display:grid;gap:4px}
.exblock li{display:grid;grid-template-columns:26px 1fr auto;font-size:14.5px;font-weight:600;color:var(--muted);height:28px;align-items:center}
.exblock li .idx{font-weight:800;color:var(--accent)}
.exblock li .val b{color:var(--ink);font-weight:800}
.detail-date{font-size:14px;color:var(--muted);font-weight:600;margin-top:4px}

/* settings */
.sgroup{margin-top:22px}
.sgroup h2{font-size:13px;font-weight:800;color:var(--muted);letter-spacing:.02em;margin:0 4px 8px}
.slist{border-radius:22px;overflow:hidden}
.srow{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:60px;padding:10px 14px 10px 16px;width:100%;text-align:left}
.srow + .srow,.keyedit + .srow{border-top:1px solid var(--line)}
.srow .l{min-width:0}
.srow strong{display:block;font-size:15px;font-weight:700}
.srow small{display:block;font-size:12.5px;color:var(--muted);font-weight:600;margin-top:2px}
.srow.danger strong{color:var(--danger)}
.seg{display:flex;gap:2px;padding:3px;border-radius:999px;background:rgba(0,0,0,.25);border:1px solid var(--line);flex:none}
.seg button{height:32px;padding:0 12px;border-radius:999px;font-weight:700;font-size:13px;color:var(--muted);transition:background .4s var(--ease),color .3s}
.seg button[aria-pressed=true]{background:rgba(var(--a-rgb),.16);color:var(--ink)}
.toggle{width:50px;height:30px;border-radius:999px;background:rgba(255,255,255,.1);border:1px solid var(--line);position:relative;flex:none;transition:background .35s var(--ease)}
.toggle::after{content:"";position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:50%;background:var(--ink);transition:transform .4s var(--ease)}
.toggle[aria-checked=true]{background:var(--violet)}
.toggle[aria-checked=true]::after{transform:translateX(20px)}
.stepper{display:flex;align-items:center;gap:8px}
.stepper b{min-width:52px;text-align:center;font-weight:800;font-size:15px}
.version{margin-top:24px;text-align:center;font-size:12.5px;color:var(--dim);font-weight:600}

/* dock: two tabs, the Orb, then the rest; a pill slides to the active tab */
.dock{position:absolute;z-index:7;left:16px;right:16px;bottom:var(--dock-bottom);height:var(--dock-h);border-radius:36px;display:grid;grid-template-columns:1fr 1fr 88px 1fr 1fr;align-items:center;padding:0 8px;transition:opacity .35s var(--ease),transform .5s var(--ease)}
.dock .ind{position:absolute;left:0;top:8px;height:56px;width:0;border-radius:24px;background:rgba(var(--a-rgb),.14);pointer-events:none;opacity:0;transition:transform .55s var(--ease),width .55s var(--ease),opacity .3s}
.dock .ind.ready{opacity:1}
.tab{position:relative;height:56px;margin:0 2px;border-radius:24px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;color:var(--muted);font-size:11px;font-weight:700;transition:color .3s,transform .3s var(--ease)}
.tab:active{transform:scale(.94)}
.tab svg{width:22px;height:22px;transition:color .3s}
.tab.on{color:var(--ink)}
.tab.on svg{color:var(--accent);animation:tabpop .5s var(--ease)}
@keyframes tabpop{40%{transform:translateY(-2px) scale(1.12)}}
.app.is-sub .dock,.app.voice .dock{opacity:0;transform:translateY(30px);pointer-events:none}

/* the Voice Orb: the one bold thing */
.orbbtn{justify-self:center;width:76px;height:76px;margin-top:-26px;border-radius:50%;display:grid;place-items:center;position:relative;touch-action:none;-webkit-touch-callout:none;transition:transform .35s var(--ease)}
.orbbtn:active{transform:scale(.94)}
.orbbtn::before{content:"";position:absolute;inset:-4px;border-radius:50%;background:rgba(13,15,21,.55);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);border:1px solid var(--line);z-index:-1}
.app.orbaway .orbbtn .orb{opacity:0;transition:opacity .12s}
.orb{--s:60px;position:relative;width:var(--s);height:var(--s);border-radius:50%;display:block;transition:opacity .3s}
.orb .core{position:absolute;inset:0;border-radius:50%;overflow:hidden;isolation:isolate;background:radial-gradient(circle at 50% 58%,var(--orb1) 0%,var(--orb2) 46%,var(--orb3) 100%);box-shadow:inset 0 0 0 1px rgba(var(--a-rgb),.55),inset 0 0 calc(var(--s)*.2) rgba(var(--a-rgb),.5),0 0 calc(var(--s)*.3) rgba(var(--v-rgb),.6),0 0 calc(var(--s)*.85) rgba(var(--v-rgb),.28);animation:breathe 5.2s ease-in-out infinite}
.orb .core b{position:absolute;border-radius:50%;filter:blur(calc(var(--s)*.065));mix-blend-mode:screen;will-change:transform}
.orb .core b:nth-child(1){width:86%;height:86%;left:-14%;top:-12%;background:radial-gradient(circle,var(--accent-hi),rgba(var(--a-rgb),0) 64%);animation:blob1 9s ease-in-out infinite alternate}
.orb .core b:nth-child(2){width:82%;height:82%;right:-16%;bottom:-14%;background:radial-gradient(circle,var(--blue),rgba(var(--b-rgb),0) 64%);animation:blob2 11s ease-in-out infinite alternate}
.orb .core b:nth-child(3){width:38%;height:38%;left:34%;top:30%;background:radial-gradient(circle,#fff,rgba(255,255,255,0) 66%);opacity:.5;animation:blob3 7s ease-in-out infinite alternate}
@keyframes breathe{50%{transform:scale(1.045)}}
@keyframes blob1{to{transform:translate(46%,34%) scale(1.12)}}
@keyframes blob2{to{transform:translate(-46%,-36%) scale(1.08)}}
@keyframes blob3{to{transform:translate(-30%,34%) scale(.8)}}
.app.speaking .dock .orb{animation:talk .9s ease-in-out infinite alternate}
@keyframes talk{to{transform:scale(1.08)}}

/* workout mini bar */
.minibar{position:absolute;z-index:6;left:24px;right:24px;bottom:calc(var(--dock-bottom) + var(--dock-h) + 10px);height:52px;border-radius:20px;padding:0 8px 0 14px;display:flex;align-items:center;gap:10px;text-align:left;opacity:0;transform:translateY(12px);pointer-events:none;transition:opacity .35s var(--ease),transform .5s var(--ease)}
.app.has-mini .minibar{opacity:1;transform:none;pointer-events:auto}
.minibar .dot{width:8px;height:8px;border-radius:50%;background:var(--accent);flex:none;animation:mic 1.4s infinite}
.minibar .l{flex:1;min-width:0;line-height:1.2}
.minibar strong{display:block;font-size:14px;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.minibar span{font-size:12.5px;color:var(--muted);font-weight:600}
.minibar .go{width:36px;height:36px;border-radius:12px;display:grid;place-items:center;background:rgba(var(--a-rgb),.14);color:var(--accent)}
.minibar .go svg{width:18px;height:18px}

/* toast: the intent-card surface */
.toast{position:absolute;z-index:9;left:16px;right:16px;bottom:calc(var(--dock-bottom) + var(--dock-h) + 16px);padding:12px 14px 15px;border-radius:22px;display:grid;grid-template-columns:36px 1fr auto;gap:12px;align-items:center;overflow:hidden;opacity:0;transform:translateY(18px) scale(.96);pointer-events:none;transition:opacity .35s var(--ease),transform .5s var(--ease)}
.toast.show{opacity:1;transform:none;pointer-events:auto}
.app.has-mini .toast{bottom:calc(var(--dock-bottom) + var(--dock-h) + 72px)}
.app.is-sub .toast,.app.is-sub .intent{bottom:calc(var(--dock-bottom) + 8px)}
.ic{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:rgba(var(--a-rgb),.18);color:var(--accent)}
.ic svg{width:18px;height:18px;stroke-width:2.6}
.toast.is-err .ic{background:rgba(255,138,154,.16);color:var(--danger)}
.toast b{font-size:16px;font-weight:800}
.toast .v{font-weight:800;color:var(--accent)}
.toast small{display:block;font-size:12.5px;color:var(--muted);font-weight:600;margin-top:2px}
.undo{height:34px;padding:0 14px;border-radius:999px;background:rgba(255,255,255,.07);font-weight:800;font-size:13px}
.toast .bar{position:absolute;left:0;bottom:0;height:3px;width:100%;background:linear-gradient(90deg,var(--violet),var(--accent));transform-origin:left;transform:scaleX(0)}
.toast.show .bar{animation:auto var(--ms,4s) linear forwards}
@keyframes auto{from{transform:scaleX(1)}to{transform:scaleX(0)}}

.update{position:absolute;z-index:10;left:50%;top:calc(var(--safe-top) + 6px);transform:translate(-50%,-20px);opacity:0;pointer-events:none;height:40px;padding:0 16px;border-radius:999px;display:flex;align-items:center;gap:8px;font-weight:800;font-size:13.5px;white-space:nowrap;transition:opacity .35s var(--ease),transform .5s var(--ease)}
.update.show{opacity:1;transform:translate(-50%,0);pointer-events:auto}
.update i{width:8px;height:8px;border-radius:50%;background:var(--accent)}

/* sheets */
.scrim{position:absolute;inset:0;z-index:20;background:rgba(5,6,10,.55);opacity:0;transition:opacity .35s var(--ease)}
.scrim.show{opacity:1}
.sheet{position:absolute;z-index:21;left:0;right:0;bottom:0;max-height:calc(100% - var(--safe-top) - 24px);border-radius:30px 30px 0 0;padding:10px 20px calc(20px + var(--safe-bottom));display:flex;flex-direction:column;transform:translateY(100%);transition:transform .5s var(--ease)}
.sheet.show{transform:none}
.sheet .sin{display:flex;flex-direction:column;min-height:0;flex:1}
.sheet .grab{width:40px;height:5px;border-radius:3px;background:rgba(255,255,255,.18);margin:0 auto 12px;flex:none}
.sheet .sbody{overflow-y:auto;overscroll-behavior:contain;margin:0 -20px;padding:0 20px;scrollbar-width:none}
.sheet .sbody::-webkit-scrollbar{display:none}
.sheet h2{font-size:24px;font-weight:800;letter-spacing:-.02em;line-height:1.15}
.sheet p.lead{margin-top:6px;font-size:15px;color:var(--muted);font-weight:600;line-height:1.4}
.sheet .acts{display:grid;gap:10px;margin-top:18px}
.sheet .linkbtn{height:44px;font-weight:800;font-size:14.5px;color:var(--danger)}
.shead{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px;flex:none}
.search{display:flex;align-items:center;gap:10px;height:48px;padding:0 14px;border-radius:16px;background:rgba(255,255,255,.06);border:1px solid var(--line);flex:none}
.search svg{width:18px;height:18px;color:var(--muted);flex:none}
.search input{flex:1;height:100%;outline:none;font-size:16px;font-weight:600;min-width:0}
.search input::placeholder{color:var(--dim)}
.plist{list-style:none;margin-top:10px;display:grid;gap:4px}
.prow{width:100%;min-height:56px;padding:8px 12px;border-radius:16px;display:flex;align-items:center;gap:12px;text-align:left;transition:background .25s}
.prow:active{background:rgba(var(--a-rgb),.1)}
.prow .l{flex:1;min-width:0}
.prow strong{display:block;font-size:15.5px;font-weight:800}
.prow small{display:block;font-size:12.5px;color:var(--muted);font-weight:600;margin-top:1px}
.prow .plus{width:32px;height:32px;border-radius:11px;display:grid;place-items:center;background:rgba(var(--a-rgb),.12);color:var(--accent);flex:none}
.prow .plus svg{width:16px;height:16px}
.prow.cur{background:rgba(var(--a-rgb),.1)}
.prow .n{width:24px;font-weight:800;color:var(--dim);flex:none}
.prow.cur .n{color:var(--accent)}
.prow .meta{font-size:13px;color:var(--muted);font-weight:700;white-space:nowrap}
.plabel{margin:16px 12px 4px;font-size:12.5px;font-weight:800;color:var(--dim);letter-spacing:.02em}
.none{padding:18px 12px;color:var(--muted);font-weight:600;font-size:14px}
.field{margin-top:14px}
.field label{display:block;font-size:13px;font-weight:700;color:var(--muted);margin:0 4px 6px}
.field input{width:100%;height:48px;padding:0 14px;border-radius:16px;background:rgba(255,255,255,.06);border:1px solid var(--line);font-size:16px;font-weight:600;outline:none}
.field input:focus{border-color:rgba(var(--a-rgb),.4)}
.opts{display:flex;flex-wrap:wrap;gap:6px}
.opts .chip[aria-pressed=true]{background:rgba(var(--a-rgb),.18);border-color:rgba(var(--a-rgb),.4);color:var(--ink)}
.err{margin-top:8px;font-size:13px;color:var(--danger);font-weight:700;min-height:18px}
.editnums{margin-top:16px;padding:16px;border-radius:24px}

/* motion off: in-app toggle or system setting */
html[data-motion=off] *,html[data-motion=off] *::before,html[data-motion=off] *::after{animation:none!important;transition:none!important}
@media (prefers-reduced-motion:reduce){html:not([data-motion=on]) *,html:not([data-motion=on]) *::before,html:not([data-motion=on]) *::after{animation:none!important;transition:none!important}}

/* ---------- voice screen ---------- */
.vlayer{position:absolute;inset:0;z-index:8;padding:calc(var(--safe-top) + 4px) 20px 0;touch-action:manipulation}
.vlayer .vbg{position:absolute;inset:0;z-index:-1;background:rgba(9,10,15,.68);-webkit-backdrop-filter:blur(30px) saturate(140%);backdrop-filter:blur(30px) saturate(140%);opacity:0;transition:opacity .38s var(--ease)}
.vlayer.on .vbg{opacity:1}
.vlayer{isolation:isolate}
.vlayer > *:not(.stagev):not(.vbg){transition:opacity .4s var(--ease),transform .55s var(--ease)}
.vlayer:not(.on) > *:not(.stagev):not(.vbg){opacity:0;transform:translateY(14px)}
.vlayer:not(.on) .halo,.vlayer:not(.on) .ripples,.vlayer:not(.on) .orb .spin{opacity:0!important}
.vlayer.on .hints{transition-delay:.06s}.vlayer.on .hold{transition-delay:.1s}.vlayer.on .holdnote{transition-delay:.14s}
.live{display:flex;align-items:center;gap:8px;padding:0 14px;height:36px;border-radius:999px;background:rgba(255,255,255,.06);border:1px solid var(--line);font-weight:800;font-size:13.5px;transition:background .35s,border-color .35s}
.live i{width:8px;height:8px;border-radius:50%;background:var(--dim);transition:background .3s}
.vlayer[data-phase=listening] .live{background:rgba(var(--a-rgb),.14);border-color:rgba(var(--a-rgb),.24)}
.vlayer[data-phase=listening] .live i{background:var(--accent);animation:mic 1.4s infinite}
.vlayer[data-phase=thinking] .live i{background:var(--accent);animation:blink .9s ease-in-out infinite alternate}
@keyframes blink{to{opacity:.25}}
.stagev{position:relative;height:264px;display:grid;place-items:center;margin-top:8px;transition:transform .55s var(--ease)}
.orbwrap{position:relative;display:block;transition:transform .6s var(--ease);will-change:transform}
.orb.big{--s:184px;transition:none;will-change:transform}
.orb .spin{position:absolute;inset:-6px;border-radius:50%;background:conic-gradient(from 0deg,transparent 0 62%,rgba(var(--a-rgb),.9) 80%,transparent 94%);-webkit-mask:radial-gradient(closest-side,transparent calc(100% - 3px),#000 calc(100% - 2px));mask:radial-gradient(closest-side,transparent calc(100% - 3px),#000 calc(100% - 2px));opacity:0;transition:opacity .35s}
.vlayer[data-phase=thinking] .orb .spin{opacity:1;animation:spin 1.1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.halo{position:absolute;left:50%;top:50%;width:260px;height:260px;margin:-130px 0 0 -130px;border-radius:50%;background:radial-gradient(closest-side,rgba(var(--v-rgb),.45),transparent);opacity:.22;pointer-events:none;will-change:transform,opacity;transition:opacity .3s}
.ripples{position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .3s}
.ripples b{position:absolute;left:50%;top:50%;width:184px;height:184px;margin:-92px 0 0 -92px;border-radius:50%;border:1.5px solid rgba(var(--a-rgb),.55);opacity:0}
.vlayer[data-phase=listening] .ripples b{animation:ripple 2.8s var(--ease) infinite}
.vlayer[data-phase=listening] .ripples b:nth-child(2){animation-delay:.9s}
.vlayer[data-phase=listening] .ripples b:nth-child(3){animation-delay:1.8s}
@keyframes ripple{0%{transform:scale(1);opacity:.55}65%{opacity:.14}100%{transform:scale(1.65);opacity:0}}
.wave{display:flex;justify-content:center;align-items:center;gap:4px;height:44px;margin-top:6px}
.wave i{width:4px;height:44px;border-radius:3px;background:linear-gradient(180deg,var(--accent),var(--violet));transform:scaleY(.14);opacity:.55;transition:opacity .3s;will-change:transform}
.vlayer[data-phase=listening] .wave i,.vlayer[data-phase=thinking] .wave i{opacity:1}
.say{margin-top:18px;min-height:74px;font-size:27px;line-height:1.25;font-weight:700;letter-spacing:-.02em;overflow-wrap:anywhere}
.say .w{display:inline-block;opacity:0;transform:translateY(8px);animation:wordin .45s var(--ease) forwards}
@keyframes wordin{to{opacity:1;transform:none}}
.hints{position:absolute;left:0;right:0;bottom:calc(132px + var(--safe-bottom));padding:0 20px;display:flex;gap:8px;overflow-x:auto;scrollbar-width:none}
.hints::-webkit-scrollbar{display:none}
.hints button{flex:none;height:34px;display:inline-flex;align-items:center;gap:6px;padding:0 14px;border-radius:999px;background:rgba(255,255,255,.055);border:1px solid var(--line);font-size:13.5px;font-weight:700;color:var(--muted);transition:transform .25s var(--ease),background .25s}
.hints button:active{transform:scale(.94);background:rgba(var(--a-rgb),.14)}
.hints .kbd{color:var(--ink)}
.hints svg{width:16px;height:16px;color:var(--accent)}
.hold{position:absolute;left:20px;right:20px;bottom:calc(46px + var(--safe-bottom));height:68px;border-radius:34px;display:flex;align-items:center;justify-content:center;gap:10px;font-weight:800;font-size:17px;background:linear-gradient(180deg,var(--accent),var(--accent));color:var(--accent-ink);box-shadow:0 16px 40px -10px rgba(var(--a-rgb),.6),inset 0 1px 0 rgba(255,255,255,.65);touch-action:none;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none;overflow:hidden;isolation:isolate}
.hold svg{width:22px;height:22px}
.hold .glow{position:absolute;inset:0;z-index:-1;background:radial-gradient(120% 140% at 50% 120%,rgba(255,255,255,.75),transparent 60%);opacity:0;transition:opacity .3s}
.vlayer[data-phase=listening] .hold .glow,.vlayer[data-phase=opening] .hold .glow{opacity:1;animation:holdglow 1.6s ease-in-out infinite alternate}
@keyframes holdglow{to{opacity:.45}}
.vlayer[data-phase=listening] .hold{transform:scale(.98)}
.hold[disabled]{opacity:.55}
.holdnote{position:absolute;left:0;right:0;bottom:calc(22px + var(--safe-bottom));text-align:center;font-size:12.5px;color:var(--muted);font-weight:600}
.vlayer.carded .hints{opacity:0;transform:translateY(8px);pointer-events:none}
.typebox{display:none;margin-top:10px;height:56px;border-radius:20px;padding:0 6px 0 16px;align-items:center;gap:8px}
.typebox input{flex:1;min-width:0;height:100%;outline:none;font-size:17px;font-weight:700}
.typebox input::placeholder{color:var(--dim)}
.typebox .send{width:44px;height:44px;border-radius:15px;display:grid;place-items:center;background:linear-gradient(180deg,var(--accent),var(--accent));color:var(--accent-ink)}
.typebox .send svg{width:20px;height:20px;stroke-width:2.4}
.vlayer.typing .typebox{display:flex;animation:rise .45s var(--ease)}
.vlayer.typing .stagev{transform:translateY(-34px) scale(.42);height:150px}
.vlayer.typing .wave,.vlayer.typing .hints,.vlayer.typing .hold,.vlayer.typing .holdnote{opacity:0;pointer-events:none}
.vlayer.typing .say{min-height:0;margin-top:0;font-size:0}
@keyframes rise{from{opacity:0;transform:translateY(12px)}}

/* ---------- intent card ---------- */
.intent{position:absolute;z-index:9;left:16px;right:16px;bottom:calc(var(--dock-bottom) + var(--dock-h) + 16px);padding:12px 14px 15px;border-radius:22px;display:grid;grid-template-columns:36px 1fr auto;gap:10px 12px;align-items:center;overflow:hidden;opacity:0;transform:translateY(18px) scale(.96);pointer-events:none;transition:opacity .32s var(--ease),transform .55s var(--ease)}
.intent.show{opacity:1;transform:none;pointer-events:auto}
.intent.swap > *{opacity:0;transform:translateY(4px);transition:opacity .14s,transform .14s}
.intent > *{transition:opacity .2s,transform .3s var(--ease)}
.app.has-mini .intent{bottom:calc(var(--dock-bottom) + var(--dock-h) + 72px)}
.app.voice .intent.show{transform:translateY(-22px)}
.intent .ctext{min-width:0}
.intent b{font-size:16px;font-weight:800;display:block;overflow-wrap:anywhere}
.intent .v{font-weight:800;color:var(--accent);white-space:nowrap}
.intent small{display:block;font-size:12.5px;color:var(--muted);font-weight:600;margin-top:2px;overflow-wrap:anywhere}
.intent .ic.alert{background:rgba(255,138,154,.16);color:var(--danger)}
.intent .ic.info,.intent .ic.ask{background:rgba(var(--b-rgb),.18);color:#AFC4FF}
.intent.done .ic.check svg{animation:pop .5s var(--ease)}
.intent .pair{display:flex;gap:6px}
.intent[data-kind=confirm] .ctext,.intent[data-kind=error] .ctext{grid-column:2/-1}
.intent[data-kind=confirm] .pair,.intent[data-kind=error] .pair{grid-column:2/-1;justify-self:end;margin-top:-2px}
.intent .undo.primary{background:var(--accent);color:var(--accent-ink)}
.intent .undo.x{width:34px;padding:0;font-size:18px;color:var(--muted)}
.intent .cchips{grid-column:1/-1;display:flex;gap:6px;flex-wrap:wrap}
.intent .cchips .chip{background:rgba(var(--a-rgb),.12);border-color:rgba(var(--a-rgb),.25);color:var(--ink)}
.intent .bar{position:absolute;left:0;bottom:0;height:3px;width:100%;background:linear-gradient(90deg,var(--violet),var(--accent));transform-origin:left;transform:scaleX(0)}
.intent.counting .bar{animation:auto var(--ms,1.5s) linear forwards}
.intent.done .bar{transform:scaleX(0)}

/* ---------- motion polish ---------- */
.screen{transform:translateX(var(--off-x,0)) scale(.99)}
.screen.on{transform:none}
.screen.instant{transition:none!important}
.screen.enter > *{animation:rise .55s var(--ease) both}
.screen.enter > *:nth-child(2){animation-delay:.03s}
.screen.enter > *:nth-child(3){animation-delay:.06s}
.screen.enter > *:nth-child(4){animation-delay:.09s}
.screen.enter > *:nth-child(5){animation-delay:.12s}
.screen.enter > *:nth-child(6){animation-delay:.15s}
.screen.enter > *:nth-child(n+7){animation-delay:.18s}
.num.tick-up{animation:tickUp .28s var(--ease)}
.num.tick-down{animation:tickDown .28s var(--ease)}
@keyframes tickUp{from{transform:translateY(7px);opacity:.35}}
@keyframes tickDown{from{transform:translateY(-7px);opacity:.35}}
.slide-l .exhead,.slide-l .hero .cols,.slide-l .hero .ghost,.slide-l .sets{animation:slideL .45s var(--ease)}
.slide-r .exhead,.slide-r .hero .cols,.slide-r .hero .ghost,.slide-r .sets{animation:slideR .45s var(--ease)}
@keyframes slideL{from{opacity:0;transform:translateX(-22px)}}
@keyframes slideR{from{opacity:0;transform:translateX(22px)}}
.log.flash{animation:logflash .5s var(--ease)}
@keyframes logflash{30%{transform:scale(.97);box-shadow:0 12px 40px -4px rgba(var(--a-rgb),.9),inset 0 1px 0 rgba(255,255,255,.65)}}
.sayhint{display:flex;align-items:center;justify-content:center;gap:6px;margin-top:10px;font-size:13px;color:var(--muted);font-weight:600}
.sayhint svg{width:14px;height:14px}
.log small{font-size:12.5px;font-weight:700;opacity:.62;display:flex;align-items:center;gap:6px}
.log small svg{width:14px;height:14px}
.log.split{justify-content:space-between}
.sheet.dragging{transition:none}

html[data-motion=off] .vlayer *,html[data-motion=off] .intent *{animation:none!important}
html[data-motion=off] .say .w{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){html:not([data-motion=on]) .say .w{opacity:1;transform:none}}

/* settings: voice and keys */
.keyrow{align-items:flex-start}
.keyrow .chip{flex:none;text-decoration:none;color:var(--accent)}
.kstat{color:var(--dim)!important;font-weight:700!important}
.kstat.good{color:#9EE6B8!important}
.kstat.bad{color:var(--danger)!important}
.keyedit{display:flex;gap:6px;padding:0 14px 14px 16px}
.keyedit input{flex:1;min-width:0;height:40px;padding:0 12px;border-radius:12px;background:rgba(0,0,0,.25);border:1px solid var(--line);font-size:14px;font-weight:600;outline:none}
.keyedit input:focus{border-color:rgba(var(--a-rgb),.4)}
.keyedit .chip{height:40px}
.select{height:34px;padding:0 10px;border-radius:12px;background:rgba(0,0,0,.25);border:1px solid var(--line);font-weight:700;font-size:13px;color:var(--ink)}
.snote{margin:10px 6px 0;font-size:12.5px;line-height:1.45;color:var(--dim);font-weight:600}

/* today cards (design target) */
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:12px}
.grid2.one{grid-template-columns:1fr}
.mini{padding:14px;border-radius:22px;height:128px;position:relative;display:flex;flex-direction:column;text-align:left;width:100%;transition:transform .3s var(--ease)}
button.mini:active,button.pr:active{transform:scale(.98)}
.mini .t{font-size:13px;color:var(--muted);font-weight:700}
.mini strong{font-size:18px;font-weight:800;letter-spacing:-.01em;margin-top:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.week{display:flex;align-items:center;gap:12px;margin-top:auto}
.week .ring{width:64px;height:64px}
.week .ring svg{width:64px;height:64px}
.week .ring b{font-size:16px}
.week .ring .fg{transition:stroke-dashoffset 1.1s var(--ease)}
.days{display:grid;grid-template-columns:repeat(7,1fr);gap:3px;width:100%;margin-top:10px}
.days i{display:block;height:6px;border-radius:3px;background:rgba(255,255,255,.1)}
.days i.on{background:var(--accent)}
.days i.now:not(.on){background:rgba(var(--a-rgb),.28)}
.vol{margin-top:auto;display:block}
.vol b{display:block;font-size:30px;font-weight:800;letter-spacing:-.03em;line-height:1}
.vol span{display:block;font-size:13px;color:var(--muted);font-weight:600;margin-top:2px}
.pr{margin-top:12px;padding:14px 16px;border-radius:22px;display:flex;align-items:center;gap:12px;width:100%;text-align:left;transition:transform .3s var(--ease)}
.pr .l{flex:1;min-width:0}
.pr strong{display:block;font-size:22px;font-weight:800;letter-spacing:-.02em;margin-top:6px}
.pr .p{display:block;font-size:13px;color:var(--muted);font-weight:600;margin-top:2px}
.pr svg{width:112px;height:56px;flex:none;overflow:visible}
.pr polyline{stroke-dasharray:400;stroke-dashoffset:0}
.screen.enter .pr polyline{animation:draw 1.2s var(--ease) both .15s}
.screen.enter .pr path{animation:fadein .9s ease both .35s}
.pr .pulse{transform-box:fill-box;transform-origin:center;animation:prpulse 2.4s ease-in-out 4}
@keyframes draw{from{stroke-dashoffset:400}}
@keyframes fadein{from{opacity:0}}
@keyframes prpulse{50%{transform:scale(1.5);opacity:.05}}
.screen:not(.on){pointer-events:none}

/* ---------- coach ---------- */
.coachhead{display:flex;align-items:flex-end;justify-content:space-between;gap:12px}
.coachhead .h1{margin-top:14px}
.coachhero{margin-top:18px;padding:22px 18px 18px;border-radius:30px;text-align:center;position:relative}
.coachhero::before{content:"";position:absolute;left:20%;right:20%;top:8px;height:90px;background:radial-gradient(closest-side,rgba(var(--v-rgb),.35),transparent);filter:blur(14px);z-index:-1;pointer-events:none}
.coachhero .orb{--s:64px;margin:0 auto 14px}
.coachhero h2{font-size:22px;font-weight:800;letter-spacing:-.02em}
.coachhero p{margin-top:6px;font-size:14px;color:var(--muted);font-weight:600;line-height:1.4}
.exq{display:flex;flex-direction:column;align-items:center;gap:8px;margin-top:16px}
.exq .chip{height:auto;min-height:38px;padding:8px 14px;white-space:normal;text-align:center;color:var(--ink)}
.thread{list-style:none;margin-top:16px;display:flex;flex-direction:column;gap:10px}
.msg{display:flex;animation:msgin .55s cubic-bezier(.2,1.25,.4,1) both}
.msg.me{transform-origin:100% 100%}.msg.ai{transform-origin:0 100%}
@keyframes msgin{from{opacity:0;transform:translateY(14px) scale(.94)}}
.msg.me{justify-content:flex-end}
.msg .bub{max-width:86%;padding:11px 14px;border-radius:20px;font-size:15.5px;line-height:1.45;font-weight:600;overflow-wrap:anywhere;-webkit-user-select:text;user-select:text}
.msg.me .bub{background:rgba(var(--a-rgb),.16);border:1px solid rgba(var(--a-rgb),.22);border-bottom-right-radius:8px}
.msg.ai .bub{background:rgba(25,28,37,.72);border:1px solid var(--line);border-bottom-left-radius:8px}
.msg.ai .bub p + p{margin-top:8px}
.msg.ai .bub ul{margin:6px 0 0 18px}
.msg.ai .bub b{color:var(--accent)}
.msg.is-err .bub{color:var(--muted)}
.msg.is-err .chip{margin-top:10px}
.msg.is-streaming .bub > :last-child::after{content:"";display:inline-block;width:7px;height:15px;margin-left:3px;border-radius:2px;background:var(--accent);vertical-align:-2px;animation:blink .8s ease-in-out infinite alternate}
.dots{display:inline-flex;gap:4px;padding:4px 0}
.dots i{width:7px;height:7px;border-radius:50%;background:var(--muted);animation:dot 1.1s ease-in-out infinite}
.dots i:nth-child(2){animation-delay:.15s}.dots i:nth-child(3){animation-delay:.3s}
@keyframes dot{0%,80%,100%{opacity:.25;transform:translateY(0)}40%{opacity:1;transform:translateY(-3px)}}
.composer{position:absolute;z-index:6;left:16px;right:16px;bottom:calc(var(--dock-bottom) + var(--dock-h) + 10px);height:56px;border-radius:24px;padding:0 6px 0 7px;display:flex;align-items:center;gap:8px;opacity:0;transform:translateY(12px);pointer-events:none;transition:opacity .35s var(--ease),transform .5s var(--ease),bottom .25s var(--ease)}
.app.coaching:not(.is-sub):not(.voice) .composer{opacity:1;transform:none;pointer-events:auto}
.composer input{flex:1;min-width:0;height:100%;outline:none;font-size:16px;font-weight:600}
.composer input::placeholder{color:var(--dim)}
.composer .csend{width:42px;height:42px;border-radius:15px;display:grid;place-items:center;background:linear-gradient(180deg,var(--accent),var(--accent));color:var(--accent-ink);transition:transform .25s var(--ease)}
.composer .csend:active{transform:scale(.92)}
.composer .csend svg{width:20px;height:20px;stroke-width:2.4}
.composer .csend.stop{background:rgba(255,255,255,.1);color:var(--ink)}
.app.coaching .screen#s-coach{padding-bottom:calc(var(--dock-bottom) + var(--dock-h) + 84px)}
.app.coaching.has-mini:not(.inputting):not(.kb) .composer{bottom:calc(var(--dock-bottom) + var(--dock-h) + 70px)}
.app.coaching.has-mini #s-coach{padding-bottom:calc(var(--dock-bottom) + var(--dock-h) + 144px)}
.app.kb .dock,.app.kb .minibar,.app.inputting .dock,.app.inputting .minibar{opacity:0;pointer-events:none;transform:translateY(24px) scale(.96)}
.app.kb #s-coach{padding-bottom:calc(var(--kb, 0px) + 80px)}
.intent .spin2{width:22px;height:22px;border-radius:50%;border:2.5px solid rgba(var(--a-rgb),.25);border-top-color:var(--accent);animation:spin .8s linear infinite}

/* =====================================================================
   Design pass: calmer surfaces, film grain, scroll-aware bars, labels
   ===================================================================== */
.app::after{content:"";position:absolute;inset:0;z-index:40;pointer-events:none;opacity:.045;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .6 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>")}
.ambient::after{content:"";position:absolute;inset:0;background:radial-gradient(120% 60% at 50% -10%,rgba(var(--v-rgb),.12),transparent 60%),linear-gradient(180deg,transparent 55%,rgba(7,8,12,.55))}

.solid{background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.012) 55%),rgba(20,23,31,.8);border:1px solid rgba(255,255,255,.055);box-shadow:inset 0 1px 0 rgba(255,255,255,.055),0 18px 36px -22px rgba(0,0,0,.85)}
.glass{background:linear-gradient(160deg,rgba(255,255,255,.09),rgba(255,255,255,.02) 45%),rgba(26,29,40,.5);border:1px solid rgba(255,255,255,.08);box-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 26px 50px -22px rgba(0,0,0,.75)}
.chip{background:rgba(255,255,255,.055);border-color:rgba(255,255,255,.06)}

.label{font-size:11.5px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--dim)}
.section{display:flex;align-items:baseline;justify-content:space-between;margin:26px 4px 10px}
.textbtn{font-size:13.5px;font-weight:800;color:var(--accent);padding:6px 0 6px 12px}
.textbtn:active{opacity:.6}

.tabh{margin-top:14px}

.greet{letter-spacing:-.035em}
.sub.streak{color:var(--accent)}
.upcoming .label{display:block;margin-bottom:8px}
.upcoming .exnames{margin-top:10px;font-size:13.5px;color:var(--muted);font-weight:600;line-height:1.5}
.upcoming .log{margin-top:16px}
.upcoming .live{display:inline-flex;align-items:center;gap:8px;height:30px;padding:0 12px;border-radius:999px;background:rgba(var(--a-rgb),.12);border:0;font-size:13px;font-weight:800;color:var(--accent);margin-bottom:12px}
.upcoming .live.paused i,.minibar .dot.paused{animation:none;background:var(--dim)}
.mini .label{display:block}
.mini strong small,.vol b small{font-size:.55em;color:var(--muted);font-weight:700;letter-spacing:0}
.btn2{background:rgba(255,255,255,.055)}
.btn2.solid{background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.02)),rgba(20,23,31,.8)}
.btn2.soft{margin-top:14px;background:rgba(var(--a-rgb),.1);color:var(--accent);height:44px;font-size:14px}
.linkbtn.wide{display:block;width:100%;margin-top:6px;color:var(--danger)}
.linkbtn.muted{color:var(--muted)}
.tag.soft{background:rgba(var(--a-rgb),.12);color:var(--accent)}

/* cardio row on Today */
.crow{display:grid;grid-template-columns:repeat(5,1fr);gap:8px}
.cstart{height:78px;border-radius:20px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;font-size:12px;font-weight:800;color:var(--ink);transition:transform .3s var(--ease),background .3s}
.cstart svg{width:24px;height:24px;color:var(--accent)}
.cstart.more svg{color:var(--muted)}
.cstart:active{transform:scale(.94)}
.cbar{display:block;height:6px;border-radius:3px;background:rgba(255,255,255,.08);overflow:hidden;margin:8px 0 6px}
.cbar i{display:block;height:100%;border-radius:3px;background:linear-gradient(90deg,var(--blue),var(--accent));transform-origin:left;transition:transform 1s var(--ease)}
.ctypes{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:6px}
.ctype{height:84px;border-radius:20px;background:rgba(255,255,255,.05);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;font-size:12.5px;font-weight:800;transition:transform .25s var(--ease),background .25s}
.ctype svg{width:26px;height:26px;color:var(--accent)}
.ctype:active{transform:scale(.95);background:rgba(var(--a-rgb),.14)}
.ctypeicon{width:44px;height:44px;border-radius:15px;display:grid;place-items:center;background:rgba(var(--a-rgb),.12);color:var(--accent);flex:none}
.ctypeicon svg{width:24px;height:24px}
.ctypeicon.big{width:56px;height:56px;border-radius:19px}
.ctypeicon.big svg{width:30px;height:30px}

/* live cardio */
.clive{margin-top:16px;padding:22px 18px 18px;border-radius:32px;display:flex;flex-direction:column;align-items:center;position:relative}
.clive::before{content:"";position:absolute;left:18%;right:18%;top:40px;height:180px;background:radial-gradient(closest-side,rgba(var(--b-rgb),.28),transparent);filter:blur(18px);z-index:-1;pointer-events:none;transition:opacity .5s}
.clive.paused::before{opacity:.25}
.cring{position:relative;width:236px;height:236px}
.cring svg{width:100%;height:100%;transform:rotate(-90deg)}
.cring circle{fill:none;stroke-width:6;stroke-linecap:round}
.cring .bg{stroke:rgba(255,255,255,.07)}
.cring .fg{stroke:url(#rg);transition:stroke-dashoffset 1s linear}
.clive.paused .cring .fg{opacity:.35}
.cread{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px}
.cread .cicon svg{width:26px;height:26px;color:var(--accent)}
.cread b{font-size:54px;font-weight:800;letter-spacing:-.045em;line-height:1.05;font-variant-numeric:tabular-nums}
.cread > span:last-child{font-size:12px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--dim)}
.clive.paused .cread b{animation:blink 1.2s ease-in-out infinite alternate}
.cpause{margin-top:14px;height:54px;padding:0 26px;border-radius:27px;display:flex;align-items:center;gap:10px;background:rgba(255,255,255,.08);font-weight:800;font-size:16px;transition:transform .25s var(--ease),background .25s}
.cpause svg{width:20px;height:20px}
.cpause:active{transform:scale(.95)}
.clive.paused .cpause{background:linear-gradient(180deg,var(--accent),var(--accent));color:var(--accent-ink)}
.chint{margin:14px 6px 0;text-align:center;font-size:13px;color:var(--muted);font-weight:600;line-height:1.45}
.cweek{margin-top:14px;padding:14px 16px}
.cweek-t{font-size:13px;color:var(--muted);font-weight:700}
.zones{display:grid;grid-template-columns:repeat(5,1fr);gap:6px}
.zone{height:56px;border-radius:16px;background:rgba(255,255,255,.05);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;transition:transform .25s var(--ease),background .25s,box-shadow .25s}
.zone b{font-size:18px;font-weight:800}
.zone span{font-size:10.5px;font-weight:700;color:var(--muted)}
.zone[aria-pressed=true],.zone.on{background:rgba(var(--a-rgb),.16);box-shadow:inset 0 0 0 1.5px var(--zc,var(--accent))}
.zone.z1{--zc:#8b8da3}.zone.z2{--zc:#5B86FF}.zone.z3{--zc:var(--violet)}.zone.z4{--zc:var(--accent)}.zone.z5{--zc:#FF8A9A}
.zone b{color:var(--zc)}
.czone{margin-top:12px;padding:12px 16px;display:flex;align-items:center;gap:12px}
.czone .zone{width:44px;height:44px;flex:none}
.cdhead{display:flex;align-items:center;gap:14px;margin-top:10px}
.cdhead .h1{margin-top:0}
.bigstep{display:flex;align-items:center;gap:10px;justify-content:center}
.bigstep input{width:120px;height:56px;text-align:center;font-size:36px;font-weight:800;letter-spacing:-.03em;border-radius:16px;background:rgba(0,0,0,.2);outline:none;font-variant-numeric:tabular-nums}
.bigstep > span{font-size:15px;color:var(--muted);font-weight:700}
.bigstep .step{width:44px;height:44px;border-radius:14px}

/* body */
.mini.body{align-items:flex-start;text-align:left}
.mini.body strong{font-size:26px;letter-spacing:-.03em}
.bsub{display:block;font-size:12.5px;color:var(--muted);font-weight:600;margin-top:4px;line-height:1.35}
.bspark{position:absolute;right:12px;bottom:12px;width:74px;height:34px;overflow:visible;opacity:.9}
.bplus{position:absolute;right:12px;bottom:12px;width:32px;height:32px;border-radius:11px;display:grid;place-items:center;background:rgba(var(--a-rgb),.12);color:var(--accent)}
.bplus svg{width:16px;height:16px}
.mini.protein{height:auto;min-height:128px}
.prow2{display:flex;align-items:center;gap:10px;margin-top:6px}
.pring{position:relative;width:48px;height:48px;flex:none}
.pring svg{width:48px;height:48px;transform:rotate(-90deg)}
.pring circle{fill:none;stroke-width:5;stroke-linecap:round}
.pring .bg{stroke:rgba(255,255,255,.08)}
.pring .fg{stroke:url(#rg);transition:stroke-dashoffset .8s var(--ease)}
.pring b{position:absolute;inset:0;display:grid;place-items:center;font-size:13px;font-weight:800}
.prow2 .bsub{margin:0}
.padd{display:flex;gap:6px;margin-top:10px}
.padd .chip{height:30px;padding:0 10px;font-size:12.5px;flex:1;justify-content:center}

/* week review */
.review{margin-top:12px;padding:16px;border-radius:24px}
.rhead{display:flex;justify-content:space-between;align-items:center}
.rstats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:10px}
.rstats b{display:block;font-size:24px;font-weight:800;letter-spacing:-.03em}
.rstats span{font-size:12px;color:var(--muted);font-weight:600;line-height:1.3}

/* routines */
.rlist{list-style:none;display:grid;gap:8px}
.rrow{display:flex;align-items:center;gap:8px;border-radius:20px;padding:6px 8px 6px 0}
.rmain{flex:1;min-width:0;text-align:left;padding:10px 0 10px 16px}
.rmain strong{display:block;font-size:16px;font-weight:800}
.rmain span{display:block;font-size:13px;color:var(--muted);font-weight:600;margin-top:2px}
.rrow .iconbtn{background:transparent;border:0;color:var(--muted)}
.rname{width:100%;margin-top:14px;font-size:30px;font-weight:800;letter-spacing:-.03em;outline:none;padding:4px 0;border-bottom:1px solid rgba(255,255,255,.08)}
.rname:focus{border-color:rgba(var(--a-rgb),.4)}
.rname::placeholder{color:var(--dim)}
.redit{list-style:none;margin-top:14px;display:grid;gap:8px}
.reitem{display:flex;align-items:center;gap:6px;border-radius:20px;padding:10px 6px 10px 0;transition:transform .3s var(--ease),box-shadow .3s,opacity .2s;touch-action:pan-y}
.reitem.lifted{z-index:2;transition:box-shadow .3s;box-shadow:0 24px 40px -14px rgba(0,0,0,.9),inset 0 0 0 1px rgba(var(--a-rgb),.3)}
.reitem.gone{opacity:0;transform:translateX(-30px)}
.grip{width:36px;align-self:stretch;display:grid;place-items:center;color:var(--dim);touch-action:none;cursor:grab}
.grip svg{width:20px;height:20px;stroke-width:3}
.rei{flex:1;min-width:0}
.rei strong{display:block;font-size:15px;font-weight:800}
.rsr{display:flex;gap:8px;margin-top:8px}
.ms{display:inline-flex;align-items:center;gap:4px;height:34px;padding:0 4px;border-radius:12px;background:rgba(0,0,0,.22)}
.ms button{width:26px;height:26px;border-radius:9px;font-weight:800;font-size:16px;color:var(--muted)}
.ms button:active{background:rgba(var(--a-rgb),.16);color:var(--ink)}
.ms b{min-width:18px;text-align:center;font-weight:800;font-size:15px;display:inline-block}
.ms small{font-size:11px;color:var(--dim);font-weight:700;margin-right:2px}
.reitem .iconbtn.x{width:34px;height:34px;background:transparent;border:0;color:var(--dim)}

/* readiness */
.rgrid{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;margin-top:16px}
.rdy{height:74px;border-radius:18px;background:rgba(255,255,255,.05);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;transition:transform .3s var(--ease),background .3s}
.rdy b{font-size:22px;font-weight:800}
.rdy span{font-size:11px;font-weight:700;color:var(--muted)}
.rdy:active{transform:scale(.94)}
.rdy[aria-pressed=true]{background:rgba(var(--a-rgb),.18);box-shadow:inset 0 0 0 1.5px var(--accent)}
.rdy[aria-pressed=true] b{color:var(--accent)}
.easyrow{margin-top:12px;border-radius:18px;background:rgba(255,255,255,.04);animation:rise .4s var(--ease)}
.ttl em.easy{font-style:normal;color:var(--accent);font-weight:800}

/* next-set suggestion in the hero */
.sug{display:flex;align-items:center;gap:8px;margin-top:10px;font-size:12.5px;line-height:1.35;color:var(--muted);font-weight:600}
.sbadge{flex:none;height:22px;padding:0 8px;border-radius:999px;display:inline-flex;align-items:center;font-size:12px;font-weight:800;background:rgba(var(--b-rgb),.16);color:#AFC4FF}
.sug.up .sbadge{background:rgba(var(--a-rgb),.16);color:var(--accent)}
.sug.deload .sbadge{background:rgba(255,255,255,.08);color:var(--ink)}

/* coach plan card */
.msg.plan .bub{max-width:100%;width:100%;padding:14px}
.pcard .phead{display:flex;align-items:center;justify-content:space-between;gap:8px}
.pcard .phead strong{font-size:17px;font-weight:800}
.pcard > p{margin-top:6px;color:var(--muted)}
.pday{margin-top:12px;padding-top:10px;border-top:1px solid rgba(255,255,255,.06)}
.pday b{font-size:14px;color:var(--ink)}
.pday ul{list-style:none;margin:6px 0 0!important;display:grid;gap:3px}
.pday li{display:flex;justify-content:space-between;gap:10px;font-size:14px;color:var(--muted)}
.pday .psr{font-weight:800;color:var(--ink);white-space:nowrap}
.pcard .log{margin-top:14px}
.pacts{display:flex;gap:8px;align-items:stretch}
.pacts .log{flex:1;margin-top:14px}
.pacts .btn2{margin-top:14px;flex:0 0 auto}
.psaved{display:flex;align-items:center;gap:6px;margin-top:12px;color:var(--accent);font-weight:800}
.psaved svg{width:16px;height:16px}

/* history */
.hseg{margin-top:14px;display:inline-flex}
.hitem.cardio strong{display:flex;align-items:center;gap:8px}
.hic{width:26px;height:26px;border-radius:9px;display:inline-grid;place-items:center;background:rgba(var(--b-rgb),.14);color:#AFC4FF}
.hic svg{width:16px;height:16px}
.row2 .btn2{white-space:nowrap;font-size:14.5px;padding:0 12px}
.row2 .btn2 span{overflow:hidden;text-overflow:ellipsis}
.sug.easy .sbadge{background:rgba(var(--a-rgb),.16);color:var(--accent)}

/* =====================================================================
   1.5: phase 5 components and motion
   ===================================================================== */
button{-webkit-appearance:none;appearance:none}

/* greeting words rise in on arrival */
.greet .gw{display:inline-block}
.screen.enter .greet .gw{animation:wordup .7s var(--ease) both;animation-delay:calc(var(--i) * 70ms + 60ms)}
@keyframes wordup{from{opacity:0;transform:translateY(14px)}}

/* particle bursts */
.fx-burst{position:absolute;z-index:35;width:0;height:0;pointer-events:none}
.fx-burst i{position:absolute;left:-3px;top:-3px;width:6px;height:6px;border-radius:50%;opacity:0;animation:spark .8s var(--ease) forwards;animation-delay:var(--d)}
.fx-burst i.line{width:3px;height:10px;border-radius:2px;left:-1.5px;top:-5px}
@keyframes spark{0%{opacity:1;transform:translate(0,0) scale(var(--s))}70%{opacity:.9}100%{opacity:0;transform:translate(var(--dx),var(--dy)) scale(0)}}
.fx-burst b{position:absolute;left:-20px;top:-20px;width:40px;height:40px;border-radius:50%;border:2px solid rgba(var(--a-rgb),.8);animation:shock .7s var(--ease) forwards}
.fx-burst b.warm{border-color:rgba(255,217,168,.9)}
@keyframes shock{from{opacity:1;transform:scale(.3)}to{opacity:0;transform:scale(2.6)}}
.set.prflash{animation:prflash 1.4s var(--ease)}
@keyframes prflash{0%{box-shadow:0 0 0 0 rgba(255,217,168,.7);background:rgba(255,217,168,.22)}60%{box-shadow:0 0 0 10px rgba(255,217,168,0)}100%{background:rgba(255,255,255,.035)}}

/* the dock orb answers when a voice command lands */
.orbbtn::after{content:"";position:absolute;inset:4px;border-radius:50%;border:2px solid rgba(var(--a-rgb),.8);opacity:0;pointer-events:none}
.orbbtn.pulse::after{animation:orbring .85s var(--ease)}
.orbbtn.pulse-warm::after{border-color:rgba(255,217,168,.9);animation:orbring .85s var(--ease)}
.orbbtn.pulse .orb,.orbbtn.pulse-warm .orb{animation:orbpop .6s var(--ease)}
@keyframes orbring{from{opacity:1;transform:scale(.9)}to{opacity:0;transform:scale(1.9)}}
@keyframes orbpop{35%{transform:scale(1.1)}}

/* charts */
.chartcard{margin-top:12px;padding:16px 16px 12px;border-radius:24px}
.chead{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:12px}
.cval{font-size:13px;color:var(--muted);font-weight:700}
.cval b{font-size:22px;color:var(--ink);font-weight:800;letter-spacing:-.02em;margin-right:2px}
.chart{display:block;width:100%;height:auto;overflow:visible}
.chart .base{stroke:rgba(255,255,255,.08);stroke-width:1}
.chart .ax{font-size:10px;fill:var(--dim);font-weight:700;font-family:var(--font)}
.chart .bar-r{transform-box:fill-box;transform-origin:bottom;opacity:.75}
.chart .bar-r.hot{opacity:1}
.chart .bar-r.zero{opacity:.25}
.screen.enter .chart .bar-r,.chart.draw .bar-r{animation:grow .9s var(--ease) both;animation-delay:calc(var(--i) * 35ms)}
@keyframes grow{from{transform:scaleY(0)}}
.chart .stroke{stroke-dasharray:1;stroke-dashoffset:0}
.screen.enter .chart .stroke{animation:drawline 1.4s var(--ease) both .1s}
@keyframes drawline{from{stroke-dashoffset:1}}
.chart .area{opacity:1}
.screen.enter .chart .area{animation:fadein 1s ease both .5s}
.chart .dot{fill:var(--accent);transform-box:fill-box;transform-origin:center}
.screen.enter .chart .dot{animation:dotpop .5s var(--ease) both;animation-delay:calc(var(--i) * 40ms + .5s)}
@keyframes dotpop{from{transform:scale(0)}}
.chart .halo{opacity:.25;transform-box:fill-box;transform-origin:center;animation:prpulse 2.4s ease-in-out 4}

/* lifts and records */
.hhead{display:flex;align-items:flex-end;justify-content:space-between}
.hhead .iconbtn{margin-bottom:2px}
.lifts{list-style:none;display:grid;gap:8px}
.lift{width:100%;display:flex;align-items:center;gap:12px;padding:12px 14px 12px 16px;border-radius:20px;text-align:left;transition:transform .3s var(--ease)}
.lift:active{transform:scale(.98)}
.lift .l{flex:1;min-width:0}
.lift strong{display:block;font-size:15.5px;font-weight:800}
.lift .l span{display:block;font-size:12.5px;color:var(--muted);font-weight:600;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lspark{width:64px;height:30px;flex:none;overflow:visible}
.delta{font-size:13px;font-weight:800;color:var(--muted);min-width:44px;text-align:right}
.delta.up{color:#9EE6B8}
.delta.down{color:var(--danger)}
.timeline{list-style:none;position:relative;margin-left:8px;padding-left:18px;border-left:1px solid rgba(255,255,255,.08);display:grid;gap:14px}
.timeline li{position:relative;display:flex;gap:10px}
.screen.enter .timeline li{animation:rise .5s var(--ease) both;animation-delay:calc(var(--i) * 45ms + .2s)}
.tdot{position:absolute;left:-24px;top:5px;width:11px;height:11px;border-radius:50%;background:var(--warm);box-shadow:0 0 0 4px rgba(255,217,168,.12)}
.timeline strong{display:block;font-size:14.5px;font-weight:800}
.timeline span{font-size:12.5px;color:var(--muted);font-weight:600}
.exhero{margin-top:14px;padding:16px;border-radius:28px}
.exbig{display:flex;align-items:baseline;gap:6px;margin:4px 0 8px}
.exbig b{font-size:44px;font-weight:800;letter-spacing:-.04em}
.exbig > span:not(.delta){font-size:15px;color:var(--muted);font-weight:700}
.exbig .delta{margin-left:auto;font-size:15px}
.sugcard{margin-top:12px;padding:14px 16px;border-radius:22px;display:grid;gap:3px}
.sugcard strong{font-size:22px;font-weight:800;letter-spacing:-.02em}
.sugcard span:last-child{font-size:13px;color:var(--muted);font-weight:600}
.sesslist{list-style:none;display:grid;gap:6px}
.sesslist li{display:flex;justify-content:space-between;gap:12px;padding:12px 14px;border-radius:16px;font-size:13.5px}
.sesslist .d{color:var(--muted);font-weight:700;white-space:nowrap}
.sesslist .v{font-weight:800;text-align:right;word-spacing:4px}
.exblock h3 button{font:inherit;font-weight:800;text-align:left;display:inline-flex;align-items:center;gap:6px}
.exblock h3 .chev{color:var(--dim);font-size:20px;line-height:1}

/* workout tools, warm-ups */
.tools{display:flex;gap:6px;margin-top:10px}
.tool{height:30px;padding:0 10px;border-radius:999px;display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:800;color:var(--muted);background:rgba(255,255,255,.05);transition:transform .25s var(--ease),background .25s}
.tool svg{width:15px;height:15px;color:var(--accent)}
.tool:active{transform:scale(.94);background:rgba(var(--a-rgb),.14)}
.set.warm .idx{color:var(--warm);opacity:.8}
.set.warm.planned{border-color:rgba(255,217,168,.16)}
.set.warm.done{color:var(--muted)}
.ck.soft{background:rgba(255,217,168,.2);color:var(--warm)}

/* plates */
.barviz{display:flex;align-items:center;justify-content:center;height:120px;margin:6px -8px 4px}
.shaft{width:64px;height:10px;border-radius:3px;background:linear-gradient(180deg,#d6d7de,#8c8e9c)}
.side{display:flex;align-items:center;gap:3px;min-width:12px}
.side.l{flex-direction:row-reverse}
.side.l::after,.side.r::before{content:"";width:16px;height:14px;border-radius:3px;background:linear-gradient(180deg,#c9cad3,#7d7f8d)}
.plate{width:18px;height:var(--h);border-radius:5px;background:linear-gradient(90deg,rgba(255,255,255,.25),rgba(0,0,0,.25)),var(--c);display:grid;place-items:center;box-shadow:inset 0 0 0 1px rgba(255,255,255,.15);animation:plateon .5s var(--ease) both;animation-delay:calc(var(--i) * 70ms)}
.side.l .plate{--from:-30px}.side.r .plate{--from:30px}
.plate span{font-size:9px;font-weight:800;color:rgba(0,0,0,.65);writing-mode:vertical-rl;transform:rotate(180deg)}
@keyframes plateon{from{opacity:0;transform:translateX(var(--from))}}
.ptext{text-align:center;font-weight:800;color:var(--ink)}

/* finishing */
.summary.celebrate{animation:celebrate 1.6s var(--ease)}
.summary.celebrate::after{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.18) 50%,transparent 70%);transform:translateX(-120%);animation:sweep 1.2s var(--ease) .15s forwards;pointer-events:none}
@keyframes sweep{to{transform:translateX(120%)}}
@keyframes celebrate{20%{transform:scale(1.03)}100%{transform:none}}
.summary{overflow:hidden}
.vol i.n{font-style:normal}

/* =====================================================================
   Mini voice: the orb lifts out of the dock
   ===================================================================== */
.ofloat{position:absolute;inset:0;z-index:8;pointer-events:none}
.ofloat.on{pointer-events:auto}
.oscrim{position:absolute;inset:0;background:linear-gradient(to top,rgba(8,9,14,.92) 0%,rgba(8,9,14,.62) 38%,rgba(8,9,14,.12) 75%,rgba(8,9,14,0));opacity:0;transition:opacity .4s var(--ease)}
.ofloat.on .oscrim{opacity:1}
.owrap{position:absolute;left:50%;width:132px;height:132px;margin-left:-66px;bottom:calc(var(--dock-bottom) + var(--dock-h) + 44px);transition:transform .62s cubic-bezier(.34,1.5,.5,1),translate .45s var(--ease),opacity .25s;touch-action:none;will-change:transform}
.orb.lift{--s:132px;display:block;transition:none;will-change:transform}
.orb.lift .core b{scale:calc(1 + var(--l, 0) * .5);transition:scale .08s linear}
.oglow{position:absolute;left:50%;top:50%;width:300px;height:300px;margin:-150px 0 0 -150px;border-radius:50%;background:radial-gradient(closest-side,rgba(var(--v-rgb),.5),rgba(var(--b-rgb),.18) 55%,transparent);opacity:calc(.45 + var(--l, 0) * .55);transform:scale(calc(.9 + var(--l, 0) * .35));z-index:-1;pointer-events:none;transition:opacity .2s}
.ofloat:not(.on) .oglow{opacity:0;transition:opacity .25s}
.owrap::before,.owrap::after{content:"";position:absolute;inset:-6px;border-radius:50%;border:1.5px solid rgba(var(--a-rgb),.5);opacity:0;pointer-events:none}
.ofloat[data-phase=listening] .owrap::before{animation:ripple 2.4s var(--ease) infinite}
.ofloat[data-phase=listening] .owrap::after{animation:ripple 2.4s var(--ease) 1.2s infinite}
.ofloat[data-phase=thinking] .orb .spin{opacity:1;animation:spin 1.1s linear infinite}
.ofloat[data-phase=opening] .orb.lift{animation:breathe 1s ease-in-out infinite}
.obubble{position:absolute;left:24px;right:24px;bottom:calc(var(--dock-bottom) + var(--dock-h) + 196px);text-align:center;opacity:0;transform:translateY(10px);transition:opacity .35s var(--ease) .08s,transform .5s var(--ease) .08s;pointer-events:none}
.ofloat.on .obubble{opacity:1;transform:none}
.ostatus{display:inline-flex;align-items:center;gap:8px;height:30px;padding:0 14px;border-radius:999px;background:rgba(255,255,255,.07);font-size:12.5px;font-weight:800;color:var(--muted);letter-spacing:.01em}
.ofloat[data-phase=listening] .ostatus{color:var(--accent);background:rgba(var(--a-rgb),.12)}
.osay{margin-top:14px;font-size:25px;line-height:1.25;font-weight:700;letter-spacing:-.02em;min-height:32px}
.osay .w{display:inline-block;opacity:0;transform:translateY(8px);animation:wordin .45s var(--ease) forwards}
.opull{position:absolute;left:50%;bottom:calc(var(--dock-bottom) + var(--dock-h) + 184px);transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:0;font-size:11.5px;font-weight:800;color:var(--dim);letter-spacing:.06em;text-transform:uppercase;opacity:0;transition:opacity .2s;pointer-events:none}
.opull svg{width:20px;height:20px;animation:nudge 1.4s ease-in-out infinite}
.ofloat[data-phase=listening]:not([data-toggle="1"]) .opull{opacity:.55}
.ofloat.on .obubble:has(.osay .w) ~ .opull{opacity:0!important}
@keyframes nudge{50%{transform:translateY(-4px)}}
.ofloat.handoff .owrap,.ofloat.handoff .obubble,.ofloat.handoff .opull{opacity:0}
.app.voice-mini .dock .tab{opacity:.25;transition:opacity .3s}
.app.voice-mini .minibar,.app.voice-mini .composer{opacity:0;pointer-events:none}
html[data-motion=off] .ofloat *{animation:none!important}
html[data-motion=off] .osay .w{opacity:1;transform:none}

/* ---------- 1.6: session goal, muscle balance, deload, repeat ---------- */
.ttl .tgoal{transition:color .4s}
.ttl .tgoal.over{color:var(--warm)}
.mbal{margin-top:12px;padding:16px;border-radius:24px}
.mbal .rhead{display:flex;align-items:center;justify-content:space-between;gap:10px}
.mnote{font-size:12.5px;font-weight:700;color:var(--muted);text-align:right}
.mnote.warn{color:var(--warm)}
.mrows{display:grid;gap:9px;margin-top:12px}
.mrow{display:grid;grid-template-columns:78px 1fr 46px;align-items:center;gap:10px;font-size:13.5px;font-weight:700}
.mrow > span{color:var(--muted)}
.mrow i{display:block;height:8px;border-radius:4px;background:rgba(255,255,255,.07);overflow:hidden}
.mrow i b{display:block;height:100%;border-radius:4px;background:linear-gradient(90deg,var(--violet),var(--accent));transform-origin:left;animation:mgrow .9s var(--ease) both;animation-delay:calc(var(--i) * 60ms + 120ms)}
.mrow.full i b{background:linear-gradient(90deg,var(--violet),#FFD9A8)}
.mrow.behind > span{color:var(--warm)}
.mrow em{font-style:normal;text-align:right;font-variant-numeric:tabular-nums}
.mrow em small{color:var(--muted);font-weight:600}
@keyframes mgrow{from{scale:0 1}}
.dlcard{margin-top:16px;padding:18px;border-radius:26px;display:grid;gap:14px}
.dlcard .l{display:grid;gap:4px}
.dlcard .l strong{font-size:18px;font-weight:800;letter-spacing:-.01em}
.dlcard .l > span:not(.label){color:var(--muted);font-size:14px;line-height:1.4}
.dlcard.on{display:flex;align-items:center;gap:12px;padding:14px 16px;border-radius:22px}
.dlcard.on .l{flex:1;min-width:0;gap:2px}
.dlcard.on .l strong{font-size:15.5px}
.dlcard.on .l > span{font-size:13px}
.dicon{width:38px;height:38px;flex:none;border-radius:12px;display:grid;place-items:center;background:rgba(255,217,168,.12);color:var(--warm)}
.log.again{margin-top:18px}
.againchip{margin-top:10px;display:inline-flex;align-items:center;gap:8px;height:38px;padding:0 14px;border-radius:999px;background:rgba(var(--b-rgb),.1);border:1px solid rgba(var(--b-rgb),.25);color:#C9D6FF;font-weight:700;font-size:13.5px;max-width:100%;transition:transform .25s var(--ease),background .25s}
.againchip span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.againchip .i{width:17px;height:17px;flex:none}
.againchip:active{transform:scale(.96);background:rgba(var(--b-rgb),.18)}
.cgps{margin-top:12px;width:100%;display:flex;align-items:center;justify-content:center;gap:10px;height:52px;border-radius:20px;font-weight:800;font-size:15px;color:var(--ink);transition:transform .25s var(--ease)}
.cgps:active{transform:scale(.98)}
.cgps .i{width:20px;height:20px;color:var(--blue)}
.cgps.on{justify-content:flex-start;height:auto;padding:14px 14px 14px 18px;gap:12px}
.gdot{width:10px;height:10px;flex:none;border-radius:50%;background:var(--dim);position:relative;transition:background .4s}
.gdot.fix{background:#6FE3A5}
.gdot.fix::after{content:"";position:absolute;inset:-5px;border-radius:50%;border:2px solid #6FE3A5;opacity:0;animation:gping 2s var(--ease) infinite}
@keyframes gping{0%{opacity:.7;scale:.6}100%{opacity:0;scale:1.8}}
.gnum{display:flex;align-items:baseline;gap:4px}
.gnum b{font-size:30px;font-weight:800;letter-spacing:-.03em;font-variant-numeric:tabular-nums;display:inline-block}
.gnum b.bump{animation:gbump .45s var(--ease)}
@keyframes gbump{40%{scale:1.08}}
.gnum span{font-size:13px;font-weight:800;color:var(--muted)}
.gsub{flex:1;min-width:0;font-size:13px;font-weight:700;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dlcard .row2{margin:0;grid-template-columns:1.5fr 1fr;align-items:stretch}
.dlcard .row2 .log{margin:0;height:auto;min-height:50px}
.dlcard .row2 .btn2{height:auto;min-height:50px}
.msg.ai.stopped .bub{color:var(--muted);font-style:italic}
.msg.ai.stopped .chip{margin-top:8px;font-style:normal}
.owrap.drag{transition:transform .62s cubic-bezier(.34,1.5,.5,1),translate 0s,opacity .25s}
.owrap{transition:transform .62s cubic-bezier(.34,1.5,.5,1),translate .55s cubic-bezier(.34,1.6,.45,1),opacity .25s}
/* the moment it really listens: a bloom, so you know to talk */
.ofloat[data-phase=listening] .oglow{animation:bloom .55s var(--ease)}
@keyframes bloom{0%{scale:.6;opacity:.2}45%{scale:1.18;opacity:1}100%{scale:1}}
.ofloat[data-phase=opening] .oglow{opacity:.25}
.ofloat[data-phase=opening] .ostatus{opacity:.7}
.msg.is-streaming .bub > .dots:last-child::after{content:none}
/* touch presses are drawn by js/ui/press.js; keep :active from squishing twice */
@media (hover:none){.js-press :is(button,[data-act],.rmain,.hitem,.lift):active:not(.orbbtn,.step,.hold,[data-o]){transform:none}}

/* ---------- 1.7: meals ---------- */
.mealrow{margin-top:12px;width:100%;display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:22px;text-align:left}
.mcam{width:42px;height:42px;flex:none;border-radius:14px;display:grid;place-items:center;background:linear-gradient(145deg,rgba(255,217,168,.22),rgba(var(--a-rgb),.18));color:var(--warm)}
.mcam .i{width:22px;height:22px}
.mealrow .l{flex:1;min-width:0;display:grid;gap:2px}
.mealrow .l strong{font-size:15.5px;font-weight:800}
.mealrow .l span{font-size:13px;color:var(--muted);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mealrow .go{color:var(--dim)}
.sbody.meal h2{margin:0}
.mpick{display:grid;grid-template-columns:1.35fr 1fr;gap:10px;margin-top:16px}
.mbig{height:112px;border-radius:24px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;font-weight:800;font-size:15px;cursor:pointer;transition:transform .3s var(--ease)}
.mbig .i{width:30px;height:30px}
.mbig.glass .i{color:var(--accent)}
.mbig:active{transform:scale(.97)}
.mdesc{margin-top:12px;display:flex;align-items:center;gap:8px;height:52px;padding:0 6px 0 16px;border-radius:18px}
.mdesc input{flex:1;min-width:0;height:100%;background:none;border:0;outline:none;font-size:15px;font-weight:600;color:var(--ink)}
.mdesc input::placeholder{color:var(--dim)}
.mdesc .send{width:40px;height:40px;flex:none;border-radius:13px;display:grid;place-items:center;background:linear-gradient(180deg,var(--accent),var(--accent));color:var(--accent-ink)}
.mdesc .send svg{width:20px;height:20px;stroke-width:2.4}
.mphoto{position:relative;margin-top:8px;border-radius:26px;overflow:hidden;aspect-ratio:4/3;background:rgba(255,255,255,.04);animation:rise .5s var(--ease)}
.mphoto img{width:100%;height:100%;object-fit:cover;display:block;animation:mfocus 2.4s ease-in-out infinite alternate}
.mphoto.text{aspect-ratio:auto;padding:28px 22px;min-height:120px;display:grid;place-items:center}
.mphoto.text p{font-size:20px;font-weight:700;line-height:1.35;text-align:center;letter-spacing:-.01em}
.mphoto .scan{position:absolute;left:0;right:0;top:0;height:38%;background:linear-gradient(to bottom,transparent,rgba(var(--a-rgb),.28) 80%,rgba(var(--a-rgb),.8));border-bottom:2px solid rgba(var(--a-rgb),.95);box-shadow:0 8px 30px rgba(var(--a-rgb),.5);animation:scan 1.6s cubic-bezier(.6,0,.4,1) infinite alternate;pointer-events:none}
@keyframes scan{from{translate:0 -100%}to{translate:0 175%}}
@keyframes mfocus{to{scale:1.04}}
.mthink{margin:16px 0 4px;display:flex;align-items:center;justify-content:center;gap:10px;font-weight:700;color:var(--muted)}
.sbody.meal > .linkbtn{display:block;margin:6px auto 0}
.mhead{display:flex;align-items:center;gap:14px;animation:rise .45s var(--ease)}
.mthumb{width:58px;height:58px;flex:none;border-radius:18px;object-fit:cover;box-shadow:0 8px 20px -8px rgba(0,0,0,.7)}
.mthumb.icon{display:grid;place-items:center;background:rgba(255,255,255,.06);color:var(--warm)}
.mthumb.icon.sm{width:44px;height:44px;border-radius:14px}
.mhead h2{font-size:21px;line-height:1.2;letter-spacing:-.02em}
.mconf{display:inline-block;margin-top:5px;height:22px;line-height:22px;padding:0 9px;border-radius:999px;font-size:11.5px;font-weight:800;background:rgba(255,255,255,.07);color:var(--muted)}
.mconf.high{background:rgba(111,227,165,.14);color:#8FEBBB}
.mconf.low{background:rgba(255,217,168,.14);color:var(--warm)}
.mnums{margin-top:18px;display:grid;grid-template-columns:1.2fr 1.2fr 1fr 1fr;gap:8px}
.mnum{padding:12px 10px;border-radius:18px;background:rgba(255,255,255,.045);border:1px solid var(--line);display:grid;gap:2px;animation:rise .5s var(--ease) both}
.mnum:nth-child(2){animation-delay:.05s}.mnum:nth-child(3){animation-delay:.1s}.mnum:nth-child(4){animation-delay:.15s}
.mnum b{font-size:28px;font-weight:800;letter-spacing:-.03em;font-variant-numeric:tabular-nums;line-height:1.1}
.mnum.sm b{font-size:19px;padding-top:6px}
.mnum span{font-size:11.5px;font-weight:800;color:var(--dim);letter-spacing:.02em}
.mnum.hot{background:linear-gradient(160deg,rgba(var(--a-rgb),.2),rgba(var(--a-rgb),.05));border-color:rgba(var(--a-rgb),.3)}
.mnum.hot b{color:var(--accent-hi)}
.mport{display:flex;flex-wrap:wrap;gap:6px}
.mport .chip[aria-pressed=true]{background:rgba(var(--a-rgb),.2);border-color:rgba(var(--a-rgb),.45);color:var(--ink)}
.mitems{list-style:none;margin:12px 0 0;padding:0;display:grid;gap:2px}
.mitems li{display:grid;grid-template-columns:1fr auto 58px;gap:10px;align-items:center;padding:9px 2px;border-bottom:1px solid var(--line);font-size:14px;font-weight:650;animation:rise .4s var(--ease) both;animation-delay:calc(var(--i) * 45ms + .15s)}
.mitems li:last-child{border-bottom:0}
.mitems em{font-style:normal;color:var(--dim);font-weight:700;font-size:13px}
.mitems b{text-align:right;color:var(--accent);font-variant-numeric:tabular-nums}
.mtot{font-size:12.5px;font-weight:800;color:var(--muted)}
.mlist{list-style:none;margin:8px 0 0;padding:0;display:grid;gap:8px}
.mlist li{display:flex;align-items:center;gap:12px;padding:8px 8px 8px 8px;border-radius:18px;background:rgba(255,255,255,.035);border:1px solid var(--line)}
.mlist img{width:44px;height:44px;border-radius:14px;object-fit:cover;flex:none}
.mlist .l{flex:1;min-width:0;display:grid;gap:1px}
.mlist .l strong{font-size:14.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mlist .l span{font-size:12.5px;color:var(--muted);font-weight:600}

/* ---------- 1.7: Drive backup ---------- */
.dnudge{margin-top:14px;width:100%;display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:22px;text-align:left;border-color:rgba(var(--b-rgb),.28);background:linear-gradient(135deg,rgba(var(--b-rgb),.12),rgba(25,28,37,.72) 60%)}
.dicon2{width:40px;height:40px;flex:none;border-radius:13px;display:grid;place-items:center;background:rgba(var(--b-rgb),.16);color:#9DB6FF}
.dnudge .l{flex:1;min-width:0;display:grid;gap:2px}
.dnudge .l strong{font-size:15px;font-weight:800}
.dnudge .l span{font-size:12.5px;color:var(--muted);font-weight:600}
.dnudge .go{color:var(--dim)}
.dstat{width:34px;height:34px;display:grid;place-items:center;border-radius:11px;background:rgba(255,255,255,.06);color:var(--dim)}
.dstat.ok{background:rgba(111,227,165,.12);color:#8FEBBB}
.dstat .i{width:19px;height:19px}
.dhelp{padding:4px 16px 12px;font-size:13.5px;color:var(--muted)}
.dhelp summary{cursor:pointer;font-weight:800;color:var(--accent);padding:10px 0;list-style:none}
.dhelp summary::-webkit-details-marker{display:none}
.dhelp ol{margin:4px 0 8px;padding-left:20px;display:grid;gap:6px;line-height:1.45}
.dhelp code{font-size:12.5px;background:rgba(255,255,255,.07);padding:2px 6px;border-radius:6px;color:var(--ink);word-break:break-all}
.snote.bad{color:var(--danger);padding:0 16px 8px;margin:0}
.srow .log{margin:0}
.dfiles{list-style:none;padding:0;margin:12px 0 0;display:grid;gap:8px}
.dfiles .srow{width:100%;border-radius:18px}
.dnudge.gone{opacity:0;transform:scale(.96);transition:opacity .3s,transform .3s var(--ease)}
.srow > svg.i{flex:none;width:18px;height:18px;color:var(--dim)}

/* ---------- 1.7: hands-free ---------- */
.topacts{display:flex;align-items:center;gap:8px}
.hfbtn .i{width:20px;height:20px}
.hfbtn.is-on{background:rgba(var(--a-rgb),.18);border-color:rgba(var(--a-rgb),.45);color:var(--accent);box-shadow:0 0 0 4px rgba(var(--a-rgb),.08)}
.hfpill{margin-top:10px;display:flex;align-items:center;gap:10px;height:44px;padding:0 6px 0 14px;border-radius:999px;background:rgba(var(--a-rgb),.09);border:1px solid rgba(var(--a-rgb),.22);animation:rise .45s var(--ease);transition:opacity .25s,transform .25s var(--ease)}
.hfpill.bye{opacity:0;transform:translateY(-6px)}
.hfdot{position:relative;width:12px;height:12px;flex:none}
.hfdot i{position:absolute;inset:0;border-radius:50%;background:var(--accent);transform:scale(calc(.8 + var(--l, 0) * .9));transition:transform .08s linear,background .3s}
.hfdot::after{content:"";position:absolute;inset:-5px;border-radius:50%;border:2px solid var(--accent);opacity:0}
.hfpill[data-s=listening] .hfdot::after{animation:gping 2.2s var(--ease) infinite}
.hfpill[data-s=hearing] .hfdot i{background:var(--accent-hi);box-shadow:0 0 14px rgba(var(--a-rgb),.9)}
.hfpill[data-s=thinking] .hfdot i{animation:blink .7s ease-in-out infinite alternate}
.hfpill[data-s=heard]{background:rgba(111,227,165,.1);border-color:rgba(111,227,165,.3)}
.hfpill[data-s=heard] .hfdot i{background:#6FE3A5}
.hfpill[data-s=paused] .hfdot i{background:var(--dim)}
.hft{flex:1;min-width:0;font-size:13.5px;font-weight:750;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hft.swap{animation:wordup .35s var(--ease)}
.hfpill .chip{height:32px}

/* ---------- 1.7: morning check-in ---------- */
.ckcard{margin-top:16px;padding:16px;border-radius:26px;display:grid;gap:12px;animation:rise .5s var(--ease)}
.ckcard .rhead{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.cksay{font-size:12px;font-weight:700;color:var(--dim);text-align:right}
.ckrow{display:grid;gap:7px}
.ckl{font-size:12.5px;font-weight:800;color:var(--muted)}
.ckopts{display:flex;flex-wrap:wrap;gap:6px}
.ckopts .chip{height:36px;padding:0 13px;font-size:13.5px}
.ckopts .chip[aria-pressed=true]{background:rgba(var(--a-rgb),.2);border-color:rgba(var(--a-rgb),.5);color:var(--ink);box-shadow:0 0 0 3px rgba(var(--a-rgb),.08)}
.ckopts.energy .chip.e1[aria-pressed=true],.ckopts.energy .chip.e2[aria-pressed=true]{background:rgba(255,217,168,.16);border-color:rgba(255,217,168,.45)}
.ckopts.energy .chip.e5[aria-pressed=true]{background:rgba(111,227,165,.14);border-color:rgba(111,227,165,.45)}
.ckcard .log{margin-top:2px}
.ckcard .log:disabled{opacity:.45;box-shadow:none}
.ckdone{margin-top:16px;width:100%;display:flex;align-items:center;gap:14px;padding:14px 16px;border-radius:24px;text-align:left;animation:rise .5s var(--ease)}
.ckring{position:relative;width:52px;height:52px;flex:none;display:grid;place-items:center}
.ckring svg{position:absolute;inset:0;transform:rotate(-90deg)}
.ckring .bg{fill:none;stroke:rgba(255,255,255,.08);stroke-width:5}
.ckring .fg{fill:none;stroke:var(--accent);stroke-width:5;stroke-linecap:round;transition:stroke-dashoffset 1s var(--ease)}
.ckdone.push .ckring .fg{stroke:#6FE3A5}
.ckdone.easy .ckring .fg{stroke:var(--warm)}
.ckring b{font-size:19px;font-weight:800}
.ckdone .l{flex:1;min-width:0;display:grid;gap:2px}
.ckdone .l strong{font-size:15.5px;font-weight:800}
.ckdone .l > span{font-size:13px;color:var(--muted);font-weight:600}
.ckwarn{font-size:12.5px!important;color:var(--warm)!important;font-weight:700}
p.ckwarn{margin:6px 0 0}
.ckbars{display:flex;align-items:flex-end;gap:3px;height:34px;flex:none}
.ckbars i{display:block;width:5px;height:100%;border-radius:3px;background:linear-gradient(to top,#5B86FF,var(--accent));transform-origin:bottom;animation:grow .7s var(--ease) both;animation-delay:calc(var(--i) * 50ms + .1s)}

/* ---------- 1.7: body screen ---------- */
.chartcard .btn2{margin-top:12px;width:100%}
.bnote{color:var(--muted);font-size:14px;margin:10px 0 0}
.msites{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.msite{padding:12px;border-radius:18px;display:grid;gap:4px;text-align:left;animation:rise .45s var(--ease) both;animation-delay:calc(var(--i) * 40ms);transition:border-color .3s,background .3s}
.msite.on{border-color:rgba(var(--a-rgb),.45);background:rgba(var(--a-rgb),.1)}
.msite b{font-size:20px;font-weight:800;letter-spacing:-.02em}
.msite b small{font-size:12px;color:var(--muted);font-weight:700}
.msite .delta{font-size:12px}
.msites + .chartcard{margin-top:10px}
.mform{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:14px}
.mfield{display:grid;grid-template-columns:1fr auto;align-items:center;gap:4px 8px;padding:10px 12px;border-radius:16px;background:rgba(255,255,255,.05);border:1px solid var(--line)}
.mfield span{grid-column:1/-1;font-size:12px;font-weight:800;color:var(--muted)}
.mfield input{min-width:0;background:none;border:0;outline:none;font-size:20px;font-weight:800;color:var(--ink);font-variant-numeric:tabular-nums}
.mfield input::placeholder{color:var(--dim)}
.mfield em{font-style:normal;font-size:12px;color:var(--dim);font-weight:700}
.row2.one{grid-template-columns:1fr}
.row2.one .log{margin:0}
.phday{margin-top:14px}
.pdate{display:block;font-size:12.5px;font-weight:800;color:var(--muted);margin-bottom:8px}
.pgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.pthumb{position:relative;aspect-ratio:3/4;border-radius:16px;overflow:hidden;background:rgba(255,255,255,.04);animation:rise .45s var(--ease) both;animation-delay:calc(var(--i) * 50ms)}
.pthumb img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .4s var(--ease)}
.pthumb:active img{transform:scale(1.04)}
.pthumb span{position:absolute;left:6px;bottom:6px;height:20px;line-height:20px;padding:0 7px;border-radius:999px;background:rgba(8,9,14,.6);font-size:11px;font-weight:800;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.snote.center,.lead.center{text-align:center}
.pview{border-radius:22px;overflow:hidden;background:#000;max-height:62vh;display:grid;place-items:center}
.pview img{max-width:100%;max-height:62vh;display:block;animation:fadein .4s}
.cmp{position:relative;margin-top:12px;aspect-ratio:3/4;max-height:56vh;width:100%;border-radius:22px;overflow:hidden;background:#000;touch-action:none;user-select:none}
.cmp img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none}
.cmp .cb{clip-path:inset(0 0 0 calc(var(--x) * 100%))}
.chandle{position:absolute;top:0;bottom:0;left:calc(var(--x) * 100%);width:2px;margin-left:-1px;background:rgba(255,255,255,.9);box-shadow:0 0 12px rgba(0,0,0,.6);pointer-events:none}
.chandle i{position:absolute;top:50%;left:50%;width:40px;height:40px;margin:-20px 0 0 -20px;border-radius:50%;background:rgba(255,255,255,.92);box-shadow:0 6px 20px rgba(0,0,0,.5)}
.chandle i::before,.chandle i::after{content:"";position:absolute;top:50%;width:0;height:0;border:6px solid transparent;margin-top:-6px}
.chandle i::before{left:6px;border-right-color:#222}
.chandle i::after{right:6px;border-left-color:#222}
.ctag{position:absolute;top:10px;height:24px;line-height:24px;padding:0 9px;border-radius:999px;background:rgba(8,9,14,.62);font-size:12px;font-weight:800;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.ctag.l{left:10px}.ctag.r{right:10px}
.cpick{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;padding:2px}
.cpt{flex:none;width:52px;height:68px;border-radius:12px;overflow:hidden;border:2px solid transparent;opacity:.6;transition:opacity .25s,border-color .25s}
.cpt[aria-pressed=true]{border-color:var(--accent);opacity:1}
.cpt img{width:100%;height:100%;object-fit:cover;display:block}

/* ---------- 1.8: one-tap check-in ---------- */
.ckq{margin-top:16px;padding:18px 16px 14px;border-radius:26px;display:grid;gap:14px;animation:rise .5s var(--ease)}
.ckq > strong{font-size:18px;font-weight:800;letter-spacing:-.01em}
.feel{display:grid;grid-template-columns:repeat(5,1fr);gap:6px}
.fbtn{display:grid;justify-items:center;gap:6px;padding:10px 0 8px;border-radius:18px;background:rgba(255,255,255,.04);border:1px solid transparent;font-size:12px;font-weight:800;color:var(--muted);transition:background .3s,border-color .3s,color .3s,transform .35s var(--ease)}
.fbtn .face{width:34px;height:34px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;transition:transform .45s cubic-bezier(.34,1.6,.5,1)}
.fbtn .face .eye{fill:currentColor;stroke:none}
.fbtn.f1{color:#FFB38A}.fbtn.f2{color:#FFD9A8}.fbtn.f3{color:#D8D4EE}.fbtn.f4{color:var(--accent)}.fbtn.f5{color:#8FEBBB}
.fbtn span{color:var(--muted)}
.fbtn[aria-pressed=true]{background:rgba(255,255,255,.09);border-color:currentColor}
.fbtn[aria-pressed=true] .face,.fbtn:active .face{transform:scale(1.15) rotate(-4deg)}
.ckdone{display:grid;gap:10px;padding:14px 14px 12px 14px}
.ckdone.arrive{animation:ckarrive .6s cubic-bezier(.34,1.4,.5,1)}
@keyframes ckarrive{from{opacity:.4;transform:scale(.96)}}
.ckmain{display:flex;align-items:center;gap:14px}
.ckring{border-radius:50%}
.ckadd{display:flex;gap:6px;flex-wrap:wrap}
.ckadd .chip{height:32px;font-size:13px;color:var(--muted)}
.ckadd .chip.is-set{color:var(--ink);background:rgba(var(--a-rgb),.12);border-color:rgba(var(--a-rgb),.3)}
.ckadd .chip[aria-expanded=true]{border-color:rgba(var(--a-rgb),.5)}
.ckextra{animation:rise .35s var(--ease)}
.ckextra .chip.done{background:rgba(var(--a-rgb),.18);color:var(--ink)}

/* ---------- 1.8: barcode scanner ---------- */
.mealwrap{margin-top:12px;display:flex;gap:8px}
.mealwrap .mealrow{margin-top:0;flex:1;min-width:0}
.mscanbtn{width:64px;flex:none;border-radius:22px;display:grid;place-items:center;color:var(--accent)}
.mscanbtn .i{width:26px;height:26px}
.mscan{margin-top:16px;width:100%;display:flex;align-items:center;gap:14px;padding:16px;border-radius:24px;text-align:left}
.mscan > .i:first-child{width:30px;height:30px;color:var(--accent);flex:none}
.mscan span{flex:1;display:grid;gap:2px}
.mscan strong{font-size:16px;font-weight:800}
.mscan small{font-size:13px;color:var(--muted);font-weight:600}
.mscan > .i:last-child{color:var(--dim)}
.sheet.scansheet{top:0;max-height:none;height:100%;border-radius:0;padding:0;background:#05060A;border:0}
.sheet.scansheet .grab{position:absolute;z-index:3;left:0;right:0;top:calc(var(--safe-top) + 6px)}
.sheet.scansheet .sin{height:100%;display:flex;flex-direction:column}
.scanview{position:relative;flex:1;overflow:hidden;background:#000}
.scanview video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;animation:fadein .5s}
.scanwin{position:absolute;left:50%;top:42%;width:min(78vw,320px);height:170px;margin:-85px 0 0 calc(min(78vw,320px) / -2);border-radius:26px;box-shadow:0 0 0 100vmax rgba(5,6,10,.58);translate:var(--tx,0) var(--ty,0);scale:var(--sx,1) var(--sy,1);transition:translate .42s cubic-bezier(.34,1.3,.5,1),scale .42s cubic-bezier(.34,1.3,.5,1),box-shadow .4s}
.scanwin .c{position:absolute;width:34px;height:34px;border:3.5px solid #fff;border-radius:4px;filter:drop-shadow(0 0 6px rgba(var(--a-rgb),.8));transition:border-color .3s;animation:corner 1.6s ease-in-out infinite}
.scanwin .tl{left:-2px;top:-2px;border-right:0;border-bottom:0;border-top-left-radius:24px}
.scanwin .tr{right:-2px;top:-2px;border-left:0;border-bottom:0;border-top-right-radius:24px;animation-delay:.1s}
.scanwin .bl{left:-2px;bottom:-2px;border-right:0;border-top:0;border-bottom-left-radius:24px;animation-delay:.2s}
.scanwin .br{right:-2px;bottom:-2px;border-left:0;border-top:0;border-bottom-right-radius:24px;animation-delay:.3s}
@keyframes corner{50%{scale:1.08}}
.scanwin .laser{position:absolute;left:14px;right:14px;top:50%;height:2px;border-radius:2px;background:linear-gradient(90deg,transparent,var(--accent-hi) 20%,#fff 50%,var(--accent-hi) 80%,transparent);box-shadow:0 0 16px 3px rgba(var(--a-rgb),.75);animation:laser 1.8s cubic-bezier(.45,0,.55,1) infinite alternate}
@keyframes laser{from{translate:0 -62px}to{translate:0 62px}}
.scanwin.locked{box-shadow:0 0 0 100vmax rgba(5,6,10,.75)}
.scanwin.locked .c{border-color:#6FE3A5;animation:none;filter:drop-shadow(0 0 10px rgba(111,227,165,.9))}
.scanwin.locked .laser{opacity:0;transition:opacity .15s}
.scanwin.locked::after{content:"";position:absolute;inset:0;border-radius:inherit;background:rgba(111,227,165,.25);animation:lockflash .5s ease-out forwards}
@keyframes lockflash{from{opacity:1}to{opacity:0}}
.scantop{position:absolute;left:16px;right:16px;top:calc(var(--safe-top) + 30px);display:flex;align-items:center;justify-content:center;gap:10px;z-index:2}
.scanhint{height:36px;line-height:36px;padding:0 16px;border-radius:999px;background:rgba(20,22,30,.45);-webkit-backdrop-filter:blur(18px) saturate(160%);backdrop-filter:blur(18px) saturate(160%);border:1px solid rgba(255,255,255,.14);font-size:14px;font-weight:800}
.glassbtn{position:absolute;right:0;background:rgba(20,22,30,.45);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);border-color:rgba(255,255,255,.14)}
.glassbtn.is-on{background:rgba(255,236,170,.9);color:#2A2106}
.scanbar{position:absolute;left:16px;right:16px;bottom:calc(var(--safe-bottom) + 24px);display:flex;gap:10px;justify-content:center;z-index:2}
.glasspill{height:48px;padding:0 18px;border-radius:999px;display:inline-flex;align-items:center;gap:8px;background:rgba(20,22,30,.5);-webkit-backdrop-filter:blur(20px) saturate(160%);backdrop-filter:blur(20px) saturate(160%);border:1px solid rgba(255,255,255,.16);box-shadow:inset 0 1px 0 rgba(255,255,255,.18);font-weight:800;font-size:14px;color:var(--ink)}
.glasspill .i{width:19px;height:19px}
.pwrap{flex:1;display:flex;flex-direction:column;justify-content:flex-end;padding:calc(var(--safe-top) + 40px) 14px calc(var(--safe-bottom) + 16px);background:radial-gradient(120% 70% at 50% 0%,rgba(var(--v-rgb),.28),transparent 60%),#07080D;overflow-y:auto}
.fcard{padding:18px;border-radius:30px;display:grid;gap:14px}
.fcard.in{animation:cardup .6s cubic-bezier(.2,1.2,.3,1)}
@keyframes cardup{from{opacity:0;transform:translateY(40px) scale(.97)}}
.fcard h2{margin:0}
.fhead{display:flex;align-items:center;gap:14px}
.fhead img,.picon{width:64px;height:64px;flex:none;border-radius:18px;object-fit:contain;background:#fff;box-shadow:0 10px 24px -10px rgba(0,0,0,.8)}
.picon{display:grid;place-items:center;background:rgba(255,255,255,.06);color:var(--accent)}
.picon svg{width:30px;height:30px}
.fhead div{display:grid;gap:3px;min-width:0}
.fhead strong{font-size:19px;line-height:1.2;letter-spacing:-.01em}
.fhead span{font-size:12.5px;color:var(--muted);font-weight:650}
.fcard .mnums{margin-top:0}
.mnum b.tick{animation:tickUp .3s var(--ease)}
.amounts{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.amounts .chip[aria-pressed=true]{background:rgba(var(--a-rgb),.2);border-color:rgba(var(--a-rgb),.5);color:var(--ink)}
.gram{display:inline-flex;align-items:center;gap:4px;height:34px;padding:0 10px;border-radius:999px;background:rgba(255,255,255,.06);border:1px solid var(--line)}
.gram input{width:52px;background:none;border:0;outline:none;color:var(--ink);font-weight:800;font-size:14px}
.gram span{font-size:12px;color:var(--dim);font-weight:800}
.fcard .log{margin-top:0}
.fcard .linkbtn{justify-self:center}
.fcard.loading{min-height:230px;align-content:start}
.sk{border-radius:14px;background:linear-gradient(90deg,rgba(255,255,255,.05),rgba(255,255,255,.12),rgba(255,255,255,.05));background-size:200% 100%;animation:shimmer 1.2s linear infinite}
.sk.a{height:64px;width:64px;border-radius:18px}.sk.b{height:22px;width:70%}.sk.c{height:72px}
@keyframes shimmer{from{background-position:200% 0}to{background-position:-200% 0}}
.scode{font-size:13px;color:var(--dim);font-weight:700;letter-spacing:.08em;text-align:center}
.mnum span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gram input:placeholder-shown + span{display:none}

/* ---------- 1.8: favourite meals ---------- */
.favrow{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;margin:10px -20px 0;padding:2px 20px 4px;scroll-snap-type:x proximity}
.sheet .favrow{margin:8px -20px 0}
.favchip{flex:none;display:flex;align-items:center;gap:9px;height:48px;padding:0 14px 0 6px;border-radius:16px;scroll-snap-align:start;animation:rise .45s var(--ease) both;animation-delay:calc(var(--i) * 45ms);transition:transform .3s var(--ease),background .3s,border-color .3s}
.favchip img,.favchip .fi{width:36px;height:36px;border-radius:11px;object-fit:cover;flex:none}
.favchip .fi{display:grid;place-items:center;background:rgba(255,217,168,.12);color:var(--warm)}
.favchip .fi .i{width:18px;height:18px}
.favchip .fn{max-width:130px;font-size:13.5px;font-weight:750;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.favchip b{font-size:13px;color:var(--accent);font-weight:800;white-space:nowrap}
.favchip.logged{border-color:rgba(111,227,165,.5);background:rgba(111,227,165,.1)}
.favchip.logged b{color:#8FEBBB}
.iconbtn.star .i{width:18px;height:18px}
.iconbtn.star[aria-pressed=true]{color:var(--warm);background:rgba(255,217,168,.12)}
.iconbtn.star[aria-pressed=true] .i{fill:currentColor}
.mscan > .i:last-child{width:20px;height:20px;flex:none}
.mthumb.icon .i{width:24px;height:24px}
.mthumb.icon.sm .i{width:20px;height:20px}

/* =====================================================================
   1.8: liquid glass. Layered fill + specular highlight + a light-catching
   gradient rim, over a strong saturated blur. Transform/opacity animations only.
   ===================================================================== */
.glass{
  --gl-fill:rgba(22,25,35,.5);
  background:
    radial-gradient(120% 70% at 0% 0%,rgba(255,255,255,.12),rgba(255,255,255,0) 55%) padding-box,
    linear-gradient(180deg,rgba(255,255,255,.075),rgba(255,255,255,.012) 46%,rgba(255,255,255,0)) padding-box,
    linear-gradient(var(--gl-fill),var(--gl-fill)) padding-box,
    linear-gradient(155deg,rgba(255,255,255,.44),rgba(255,255,255,.07) 30%,rgba(var(--a-rgb),.05) 62%,rgba(var(--a-rgb),.34)) border-box;
  border:1px solid transparent;
  -webkit-backdrop-filter:blur(30px) saturate(185%) brightness(1.06);
  backdrop-filter:blur(30px) saturate(185%) brightness(1.06);
  box-shadow:0 24px 50px -18px rgba(0,0,0,.72),inset 0 1px 1px rgba(255,255,255,.2),inset 0 -14px 28px -18px rgba(var(--v-rgb),.3);
}
.solid{background-image:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,0) 42%)}
.dock.glass{--gl-fill:rgba(16,18,26,.46);box-shadow:0 18px 40px -12px rgba(0,0,0,.75),inset 0 1px 1px rgba(255,255,255,.24),inset 0 -12px 22px -16px rgba(var(--v-rgb),.35)}
.sheet.glass{--gl-fill:rgba(20,23,32,.72)}
.toast.glass,.intent.glass{--gl-fill:rgba(20,23,32,.62)}

/* the tab indicator is a lens that stretches as it slides */
.dock .ind{background:radial-gradient(100% 90% at 50% 0%,rgba(255,255,255,.24),rgba(255,255,255,0) 62%),rgba(var(--a-rgb),.15);box-shadow:inset 0 1px 0 rgba(255,255,255,.28),inset 0 0 0 1px rgba(255,255,255,.07),0 8px 20px -8px rgba(var(--v-rgb),.6)}
.dock .ind.moving{animation:liquid .6s var(--ease)}
@keyframes liquid{28%{scale:1.26 .84}62%{scale:.96 1.05}100%{scale:1 1}}

/* primary buttons: glossy, with a sheen that sweeps on press */
.log{position:relative;overflow:hidden;isolation:isolate;
  background:radial-gradient(120% 100% at 28% -10%,rgba(255,255,255,.78),rgba(255,255,255,0) 55%),linear-gradient(180deg,color-mix(in srgb,var(--accent) 62%,#fff),var(--accent) 58%,color-mix(in srgb,var(--accent) 80%,var(--violet)));
  box-shadow:0 14px 34px -10px rgba(var(--a-rgb),.62),inset 0 1px 0 rgba(255,255,255,.85),inset 0 -3px 8px rgba(var(--v-rgb),.22)}
.log::after{content:"";position:absolute;inset:-2px;z-index:-1;background:linear-gradient(105deg,transparent 30%,rgba(255,255,255,.6) 48%,transparent 66%);transform:translateX(-120%);pointer-events:none}
.log:active::after{animation:sheen .75s var(--ease)}
@keyframes sheen{to{transform:translateX(120%)}}

/* an aurora that turns slowly behind everything */
.ambient i:nth-child(4){width:560px;height:560px;left:50%;top:-300px;margin-left:-280px;background:conic-gradient(from 20deg,rgba(var(--v-rgb),0),rgba(var(--v-rgb),.42),rgba(var(--b-rgb),.3),rgba(255,217,168,.14),rgba(var(--a-rgb),.3),rgba(var(--v-rgb),0));filter:blur(90px);opacity:.5;animation:aurora 70s linear infinite}
@keyframes aurora{to{transform:rotate(360deg)}}

/* content softly blurs as it slides under the dock */
.app::before{content:"";position:absolute;z-index:6;left:0;right:0;bottom:0;height:calc(var(--dock-bottom) + var(--dock-h) + 34px);pointer-events:none;
  background:linear-gradient(to top,rgba(13,15,21,.82),rgba(13,15,21,.45) 45%,rgba(13,15,21,0))}
.app.voice::before,.app.is-sub::before{opacity:0}

/* big titles melt away as you scroll */
@supports (animation-timeline:scroll()){
  .greet,.h1{animation:headmelt linear both;animation-timeline:scroll(nearest block);animation-range:0 140px}
  @keyframes headmelt{to{opacity:0;transform:translateY(-14px) scale(.97)}}
}

/* sheets: the page behind dims and blurs a little */
.scrim{-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
.sheet .sin{animation:sheetin .5s var(--ease) both}
@keyframes sheetin{from{opacity:0;transform:translateY(14px)}}

/* ---------- 1.9: onboarding ---------- */
.sheet.obsheet{top:0;max-height:none;height:100%;border-radius:0;padding:calc(var(--safe-top) + 6px) 22px calc(var(--safe-bottom) + 20px);--gl-fill:rgba(12,14,20,.86)}
.sheet.obsheet .grab{display:none}
.sheet.obsheet .sin{height:100%;display:flex;flex-direction:column}
.ob{flex:1;display:flex;flex-direction:column;min-height:0}
.obtop{display:flex;align-items:center;gap:12px;height:44px}
.obtop .iconbtn[hidden]{display:block!important;visibility:hidden}
.obbar{flex:1;height:5px;border-radius:3px;background:rgba(255,255,255,.08);overflow:hidden}
.obbar i{display:block;height:100%;border-radius:3px;background:linear-gradient(90deg,var(--violet),var(--accent));transform-origin:left;transition:transform .5s var(--ease)}
.obsp{width:40px}
.obstep{flex:1;display:flex;flex-direction:column;padding-top:8vh;min-height:0;overflow-y:auto;scrollbar-width:none}
.obstep.in-r{animation:obinr .42s var(--ease) both}
.obstep.in-l{animation:obinl .42s var(--ease) both}
.obstep.out-l{animation:obout .16s ease-in forwards}
.obstep.out-r{animation:oboutr .16s ease-in forwards}
@keyframes obinr{from{opacity:0;transform:translateX(28px)}}
@keyframes obinl{from{opacity:0;transform:translateX(-28px)}}
@keyframes obout{to{opacity:0;transform:translateX(-22px)}}
@keyframes oboutr{to{opacity:0;transform:translateX(22px)}}
.obstep h1{font-size:30px;line-height:1.15;font-weight:800;letter-spacing:-.03em}
.obsub{margin-top:10px;font-size:15px;color:var(--muted);font-weight:600;line-height:1.45}
.obnext{margin-top:auto;justify-content:space-between;height:56px;border-radius:20px;font-size:17px}
.obnext .i{width:20px;height:20px}
.obhero{display:grid;place-items:center;height:180px;margin-bottom:10px}
.obhero .orb.big{--s:120px;animation:breathe 3s ease-in-out infinite}
.obwhy{list-style:none;margin:22px 0 24px;display:grid;gap:12px}
.obwhy li{display:flex;align-items:center;gap:12px;font-size:15px;font-weight:650;color:var(--ink)}
.obwhy .i{width:22px;height:22px;flex:none;padding:3px;border-radius:50%;background:rgba(var(--a-rgb),.16);color:var(--accent)}
.obinput{margin:26px 0 20px;height:62px;padding:0 20px;border-radius:20px;background:rgba(255,255,255,.06);border:1px solid var(--line);font-size:22px;font-weight:700;outline:none;color:var(--ink)}
.obinput:focus{border-color:rgba(var(--a-rgb),.5);background:rgba(var(--a-rgb),.08)}
.obnum{margin:34px 0 18px;display:flex;align-items:center;justify-content:center;gap:14px}
.obnum b{font-size:72px;font-weight:800;letter-spacing:-.05em;font-variant-numeric:tabular-nums;min-width:2.2ch;text-align:center;display:inline-block}
.obnum b.tick{animation:tickUp .22s var(--ease)}
.obnum > span{font-size:17px;font-weight:800;color:var(--muted);margin-left:-8px;align-self:flex-end;padding-bottom:18px}
.obnum .step{width:48px;height:48px;border-radius:16px;font-size:24px}
.obrange{width:100%;margin-bottom:22px;-webkit-appearance:none;appearance:none;height:34px;background:none}
.obrange::-webkit-slider-runnable-track{height:6px;border-radius:3px;background:linear-gradient(90deg,var(--violet),var(--accent))}
.obrange::-webkit-slider-thumb{-webkit-appearance:none;width:28px;height:28px;margin-top:-11px;border-radius:50%;background:#fff;box-shadow:0 4px 14px rgba(0,0,0,.5),0 0 0 6px rgba(var(--a-rgb),.18)}
.obopts{margin-top:24px;display:grid;gap:10px}
.obopts.row{grid-template-columns:repeat(auto-fit,minmax(56px,1fr))}
.obopt{position:relative;display:grid;gap:3px;text-align:left;padding:16px 50px 16px 18px;border-radius:20px;background:rgba(255,255,255,.05);border:1px solid var(--line);animation:obopt .45s var(--ease) both;animation-delay:calc(var(--i) * 45ms + 60ms);transition:background .3s,border-color .3s,transform .3s var(--ease)}
.obopts.row .obopt{padding:18px 0;text-align:center;justify-items:center}
.obopt strong{font-size:17px;font-weight:800}
.obopt small{font-size:13px;color:var(--muted);font-weight:600}
.obck{position:absolute;right:16px;top:50%;margin-top:-12px;width:24px;height:24px;border-radius:50%;display:grid;place-items:center;background:var(--accent);color:var(--accent-ink);opacity:0;transform:scale(.4);transition:opacity .25s,transform .35s cubic-bezier(.34,1.6,.5,1)}
.obck .i{width:15px;height:15px;stroke-width:2.6}
.obopts.row .obck{top:6px;right:6px;margin:0;width:18px;height:18px}
.obopts.row .obck .i{width:11px;height:11px}
.obopt.on{background:rgba(var(--a-rgb),.14);border-color:rgba(var(--a-rgb),.55)}
.obopt.on .obck{opacity:1;transform:none}
@keyframes obopt{from{opacity:0;transform:translateY(10px)}}
.obchips{margin:24px 0 20px;display:flex;flex-wrap:wrap;gap:8px}
.obchips .chip{height:42px;padding:0 16px;font-size:15px}
.obchips .chip[aria-pressed=true]{background:rgba(var(--a-rgb),.2);border-color:rgba(var(--a-rgb),.5);color:var(--ink)}
.obhero.done{height:150px}
.obdone{width:92px;height:92px;border-radius:50%;display:grid;place-items:center;background:radial-gradient(circle at 35% 30%,var(--accent-hi),var(--violet));color:var(--accent-ink);box-shadow:0 0 0 12px rgba(var(--a-rgb),.12),0 20px 50px -10px rgba(var(--v-rgb),.8);animation:obdone .7s cubic-bezier(.34,1.6,.5,1) both}
.obdone .i{width:44px;height:44px;stroke-width:2.6}
@keyframes obdone{from{transform:scale(.3);opacity:0}}
.obsum{margin:22px 0 20px;display:flex;flex-wrap:wrap;gap:8px}
.obsum span{height:34px;line-height:34px;padding:0 14px;border-radius:999px;background:rgba(255,255,255,.07);font-size:14px;font-weight:750;animation:obopt .45s var(--ease) both;animation-delay:calc(var(--i) * 60ms + 200ms)}
.profrow{margin-top:16px;width:100%;display:flex;align-items:center;gap:14px;padding:14px 16px;border-radius:24px;text-align:left}
.pav{width:46px;height:46px;flex:none;border-radius:50%;display:grid;place-items:center;font-size:20px;font-weight:800;background:linear-gradient(145deg,var(--accent),var(--violet));color:var(--accent-ink)}
.profrow .l{flex:1;min-width:0;display:grid;gap:2px}
.profrow .l strong{font-size:17px;font-weight:800}
.profrow .l > span{font-size:13px;color:var(--muted);font-weight:650;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.profrow .go{color:var(--dim)}

/* ---------- 1.9: goals ---------- */
.gcard{margin-top:10px;width:100%;display:grid;gap:10px;padding:16px;border-radius:24px;text-align:left;animation:rise .45s var(--ease) both;animation-delay:calc(var(--i) * 60ms)}
.ghead{display:flex;align-items:flex-start;gap:10px}
.ghead .l{flex:1;min-width:0;display:grid;gap:2px}
.ghead strong{font-size:17px;font-weight:800;letter-spacing:-.01em}
.ghead .l > span{font-size:12.5px;color:var(--muted);font-weight:650}
.gstate{flex:none;height:26px;line-height:26px;padding:0 10px;border-radius:999px;font-size:12px;font-weight:800;background:rgba(255,255,255,.08);color:var(--muted)}
.gcard.ahead .gstate,.gstate.ahead,.gcard.done .gstate,.gstate.done{background:rgba(111,227,165,.14);color:#8FEBBB}
.gcard.on-track .gstate,.gstate.on-track{background:rgba(var(--a-rgb),.16);color:var(--accent)}
.gcard.behind .gstate,.gstate.behind,.gcard.missed .gstate{background:rgba(255,217,168,.14);color:var(--warm)}
.gbar{position:relative;height:10px;border-radius:5px;background:rgba(255,255,255,.07);overflow:visible}
.gbar .fill{position:absolute;inset:0;border-radius:5px;background:linear-gradient(90deg,var(--violet),var(--accent));transform-origin:left;animation:mgrow 1s var(--ease) both .15s}
.gcard.done .gbar .fill,.gcard.ahead .gbar .fill{background:linear-gradient(90deg,var(--violet),#8FEBBB)}
.gbar .gnow{position:absolute;top:-4px;width:2px;height:18px;margin-left:-1px;border-radius:1px;background:rgba(255,255,255,.7);box-shadow:0 0 8px rgba(255,255,255,.5)}
.gfoot{display:flex;justify-content:space-between;gap:10px;font-size:13px;font-weight:650;color:var(--muted)}
.gfoot b{color:var(--ink);font-weight:800;white-space:nowrap}
.gpace{font-size:12px;color:var(--dim);font-weight:650}
.gaim{margin-top:10px;display:flex;align-items:center;gap:8px;font-size:13px;font-weight:750;color:var(--warm)}
.gaim .i{width:16px;height:16px;flex:none}
.goalbtn{margin-top:12px;width:100%}
.goalbtn .i{color:var(--warm)}
.gchart{width:100%;height:150px;margin:8px 0 4px}
.gchart .gt{stroke:rgba(255,217,168,.6);stroke-width:1.5;stroke-dasharray:4 5}
.gchart .gl{fill:none;stroke:var(--accent);stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
.gchart .gp{stroke:var(--accent);stroke-width:2;stroke-dasharray:3 6;opacity:.7}
.gchart circle{fill:var(--accent)}
.gchart text{fill:var(--warm);font-size:11px;font-weight:800}

/* =====================================================================
   1.9: smoothness. Nothing re-blurs or re-animates unless something changed.
   ===================================================================== */
/* cards inside scrolling screens: the glass look without a live blur (it re-blurred every scroll frame) */
.screen .glass{-webkit-backdrop-filter:none;backdrop-filter:none;--gl-fill:rgba(27,30,42,.8)}
/* the background holds still; it swirls slowly only when you change tabs */
.ambient i{animation:none!important;transition:transform 2.8s cubic-bezier(.22,1,.36,1)}
.ambient[data-s=workout] i:nth-child(1){transform:translate(90px,40px) scale(1.12)}
.ambient[data-s=workout] i:nth-child(2){transform:translate(-40px,-120px) scale(1.05)}
.ambient[data-s=coach] i:nth-child(1){transform:translate(160px,120px) scale(.95)}
.ambient[data-s=coach] i:nth-child(2){transform:translate(-120px,60px) scale(1.12)}
.ambient[data-s=history] i:nth-child(1){transform:translate(40px,260px) scale(1.08)}
.ambient[data-s=history] i:nth-child(3){transform:translate(120px,-140px) scale(1.2)}
.ambient[data-s=today] i:nth-child(4){transform:rotate(0deg)}
.ambient[data-s=workout] i:nth-child(4){transform:rotate(70deg)}
.ambient[data-s=coach] i:nth-child(4){transform:rotate(150deg)}
.ambient[data-s=history] i:nth-child(4){transform:rotate(230deg)}
.ambient[data-s=sub] i:nth-child(4){transform:rotate(-40deg) scale(1.1)}
/* entrance animations play when a screen appears, not on every update */
.screen:not(.enter) :is(.gcard,.favchip,.msite,.pthumb,.ckq,.ckdone:not(.arrive),.hfpill,.mrow i b,.gbar .fill,.ckbars i,.mealrow,.dlcard,.dnudge){animation:none}
.msg.seen{animation:none}
.glass .label{color:var(--accent-soft)}

/* ---------- phone edges: status bar colour, Apple-style blurred edges, a dock that tucks in ---------- */
.app{background:linear-gradient(var(--edge),var(--bg) 220px)}
.edge{position:absolute;left:0;right:0;z-index:6;pointer-events:none}
.edge::before,.edge::after{content:"";position:absolute;inset:0;transition:opacity .45s var(--ease)}
/* top: always a hair of the status-bar colour so the bar and the app meet without a seam */
.edge.et{top:0;height:calc(var(--safe-top) + 58px)}
.edge.et::before{background:linear-gradient(var(--edge),color-mix(in srgb,var(--edge) 72%,transparent) 22%,color-mix(in srgb,var(--edge) 0%,transparent));opacity:.55}
.edge.et::after{-webkit-backdrop-filter:blur(14px) saturate(150%);backdrop-filter:blur(14px) saturate(150%);
  -webkit-mask-image:linear-gradient(#000 35%,transparent);mask-image:linear-gradient(#000 35%,transparent);opacity:0}
.app.under-top .edge.et::before{opacity:1}
.app.under-top .edge.et::after{opacity:1}
.edge.eb{bottom:0;height:calc(var(--dock-bottom) + var(--dock-h) + 40px)}
.edge.eb::after{-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  -webkit-mask-image:linear-gradient(transparent,#000 70%);mask-image:linear-gradient(transparent,#000 70%);opacity:0}
.app.under-bottom .edge.eb::after{opacity:1}
.app.voice .edge,.app.is-sub .edge.eb{opacity:0}
.app.is-sub .edge.et{opacity:1}
/* the dock tucks in while you read and comes back when you scroll up */
.dock{transition:opacity .35s var(--ease),transform .6s cubic-bezier(.3,1.35,.5,1)}
.dock .ind{transition:transform .6s cubic-bezier(.3,1.25,.5,1),width .6s cubic-bezier(.3,1.25,.5,1),opacity .3s}
html[data-motion=off] .edge::before,html[data-motion=off] .edge::after{transition:none}
.app.orbland .orbbtn .orb{transition:none!important}
/* Customize */
.custom{display:flex;align-items:center;justify-content:center;gap:8px;margin:26px auto 4px;height:40px;padding:0 16px;border-radius:999px;color:var(--dim);font-size:13px;font-weight:800;background:rgba(255,255,255,.04);border:1px solid var(--line);transition:color .25s,background .25s}
.custom svg{width:16px;height:16px}
.custom:active{color:var(--ink);background:rgba(255,255,255,.08)}
.swatches{display:grid;grid-template-columns:repeat(6,1fr);gap:4px}
.swatch{display:flex;flex-direction:column;align-items:center;gap:6px;padding:10px 0;border-radius:18px;font-size:11.5px;font-weight:800;color:var(--muted);transition:background .25s,color .25s}
.swatch i{width:38px;height:38px;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(255,255,255,.25),0 6px 16px -6px rgba(0,0,0,.6);transition:transform .45s cubic-bezier(.3,1.4,.5,1),box-shadow .3s}
.swatch[data-accent=violet] i{background:radial-gradient(circle at 35% 30%,#E2DBFF,#7A67F2 55%,#3B2CB9)}
.swatch[data-accent=slate] i{background:radial-gradient(circle at 35% 30%,#E8EFF7,#6F86A6 55%,#3F5573)}
.swatch[data-accent=sage] i{background:radial-gradient(circle at 35% 30%,#EAF3E8,#7E9B7A 55%,#4B6647)}
.swatch[data-accent=sand] i{background:radial-gradient(circle at 35% 30%,#F7EFE2,#B39A74 55%,#7A6443)}
.swatch[data-accent=clay] i{background:radial-gradient(circle at 35% 30%,#F8E9E3,#B7806E 55%,#7E4E40)}
.swatch[data-accent=mono] i{background:radial-gradient(circle at 35% 30%,#FFFFFF,#9A9CB0 55%,#4A4C5C)}
.swatch[aria-pressed=true]{color:var(--ink);background:rgba(255,255,255,.06)}
.swatch[aria-pressed=true] i{transform:scale(1.1);box-shadow:inset 0 0 0 1px rgba(255,255,255,.35),0 0 0 2px var(--bg),0 0 0 4px var(--accent)}
/* colour changes glide rather than snap */
html{transition:background-color .4s}
/* View Transitions: short and soft; the dock, edges and sheets stay put above the cards */
::view-transition{pointer-events:none} /* taps go straight through to the new page while cards glide */
::view-transition-group(*){animation-duration:.42s;animation-timing-function:cubic-bezier(.2,.9,.25,1)}
::view-transition-old(*),::view-transition-new(*){animation-duration:.3s}
.dock{view-transition-name:dock}
#toast{view-transition-name:toast}
.minibar{view-transition-name:minibar}
.uphead{display:flex;align-items:center;justify-content:space-between;gap:8px}
.uphead .textbtn{font-size:13px;margin:-6px -6px -6px 0}
/* a pause: the orb holds its breath while it checks whether you're done */
.ofloat[data-pause=check] .orb.lift{opacity:.82;transition:opacity .3s}
.ofloat[data-pause=wait] .ostatus{color:var(--warm);background:rgba(255,217,168,.1)}

/* the dock minimizes to a small pill (current tab + orb) while you scroll down, like iOS.
   One easing for everything so the parts move as one piece; no overshoot on layout. */
.dock{--dk:cubic-bezier(.32,.72,0,1);--c-today:1fr;--c-workout:1fr;--c-food:1fr;--c-coach:1fr;
  grid-template-columns:var(--c-today) var(--c-workout) 88px var(--c-food) var(--c-coach);
  transition:opacity .35s var(--ease),transform .5s var(--dk),left .5s var(--dk),right .5s var(--dk),grid-template-columns .5s var(--dk),height .5s var(--dk),bottom .5s var(--dk),padding .5s var(--dk)}
.tab{min-width:0;overflow:hidden;transition:color .3s,transform .3s var(--ease),opacity .22s,height .5s var(--dk),background .3s}
.tab span{transition:opacity .18s,transform .4s var(--dk)}
.orbbtn{transition:transform .5s var(--dk),margin .5s var(--dk)}
.orbbtn::before{transition:opacity .3s}
.app.compact:not(.is-sub):not(.voice):not(.kb) .dock{left:calc(50% - 66px);right:calc(50% - 66px);height:64px;padding:0 6px;
  grid-template-columns:var(--c-today) var(--c-workout) 64px var(--c-food) var(--c-coach)}
.app.compact .dock:not([data-on=today]){--c-today:0fr}
.app.compact .dock:not([data-on=workout]){--c-workout:0fr}
.app.compact .dock:not([data-on=coach]){--c-coach:0fr}
.app.compact .dock:not([data-on=food]){--c-food:0fr}
.app.compact .dock .tab:not(.on){opacity:0;pointer-events:none}
.app.compact .dock .tab span{opacity:0;transform:translateY(6px)}
.app.compact .dock .tab{height:52px;border-radius:26px}
.app.compact .dock .tab.on svg{transform:translateY(7px)}
.tab svg{transition:color .3s,transform .5s var(--dk)}
.app.compact .dock .ind{opacity:0!important}
.app.compact .dock .tab.on{background:rgba(var(--a-rgb),.14)}
.app.compact .dock .orbbtn{transform:scale(.72);margin-top:0}
.app.compact .dock .orbbtn::before{opacity:0}

/* onboarding: the getting-to-know-you chat */
.ivmount{display:block;margin-top:14px}
.iv{display:flex;flex-direction:column;gap:14px}
.ivthread{list-style:none;display:flex;flex-direction:column;gap:10px;max-height:min(46vh,380px);overflow-y:auto;padding:4px 2px;scrollbar-width:none;
  -webkit-mask-image:linear-gradient(transparent,#000 18px);mask-image:linear-gradient(transparent,#000 18px)}
.ivm{max-width:86%;padding:12px 15px;border-radius:20px;font-size:15.5px;line-height:1.4;font-weight:600;animation:ivin .45s var(--ease) both}
.ivm.seen{animation:none}
.ivm.ai{align-self:flex-start;background:rgba(255,255,255,.07);border:1px solid var(--line);border-bottom-left-radius:6px}
.ivm.me{align-self:flex-end;background:linear-gradient(180deg,rgba(var(--a-rgb),.28),rgba(var(--v-rgb),.24));border-bottom-right-radius:6px;color:var(--ink)}
.ivm.typing{padding:14px 16px}
@keyframes ivin{from{opacity:0;transform:translateY(10px) scale(.97)}}
.ivbar{display:flex;flex-direction:column;align-items:center;gap:10px}
.ivorb{padding:6px;border-radius:50%}
.ivorb .orb{--s:96px;transition:transform .12s linear}
.iv[data-phase=listening] .ivorb .orb .core,.iv[data-phase=wait] .ivorb .orb .core{box-shadow:inset 0 0 0 1px rgba(var(--a-rgb),.6),0 0 40px rgba(var(--v-rgb),.7),0 0 90px rgba(var(--v-rgb),.35)}
.iv[data-phase=thinking] .ivorb .spin,.iv[data-phase=hearing] .ivorb .spin{opacity:1;animation:spin 1.1s linear infinite}
.iv[data-phase=speaking] .ivorb .orb{animation:talk .9s ease-in-out infinite alternate}
.ivstatus{min-height:18px;font-size:13px;font-weight:800;color:var(--muted);text-align:center}
.iv[data-phase=listening] .ivstatus{color:var(--accent)}
.iv[data-phase=wait] .ivstatus{color:var(--warm)}
.ivtype{display:flex;gap:8px;width:100%}
.ivtype input{flex:1;height:46px;padding:0 16px;border-radius:999px;background:rgba(255,255,255,.05);border:1px solid var(--line);color:var(--ink);font:600 15px var(--font);-webkit-user-select:text;user-select:text}
.ivtype input:focus{outline:none;border-color:rgba(var(--a-rgb),.4)}
.ivtype button{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;background:rgba(var(--a-rgb),.16);color:var(--accent)}
.ivtype button svg{width:18px;height:18px}
.obnext.ready{animation:logflash .6s var(--ease)}
.iv[data-phase=done] .ivtype{opacity:0;pointer-events:none}
/* exercise figures */
.fig{width:44px;height:48px;flex:none;overflow:visible}
.fig path{fill:none;stroke-linecap:round;stroke-linejoin:round}
.fig .fg-near{stroke:var(--ink);stroke-width:3.4}
.fig .fg-far{stroke:var(--ink);stroke-width:3.2;opacity:.38}
.fig .fg-head{stroke:none;fill:var(--ink)}
.fig .fg-prop{stroke:var(--accent);stroke-width:2.6}
.fig .fg-scene{stroke:rgba(var(--a-rgb),.35);stroke-width:2.4}
.fig .fg-floor{stroke:rgba(255,255,255,.1);stroke-width:1.6}
.prow .pfig{width:40px;height:44px;padding:3px;border-radius:12px;background:rgba(255,255,255,.04)}
.exhead .exfig{width:50px;height:56px;align-self:center}
.exhero{display:flex;align-items:center;gap:14px}
.exhero .herofig{width:78px;height:86px;padding:4px;border-radius:22px;background:rgba(255,255,255,.04);border:1px solid var(--line)}

/* =====================================================================
   1.12: restraint. One quiet glow instead of a purple-to-blue wash, no
   grain, solid cards on the page (glass only where something floats:
   dock, sheets, toasts), flat primary buttons, neutral labels, more contrast.
   The orb stays the one bold thing.
   ===================================================================== */
:root{--muted:#A6A7B8;--dim:#80829A;--card:#171A22;--card-line:rgba(255,255,255,.07)}
.app::after{display:none}
.ambient i:nth-child(2),.ambient i:nth-child(3),.ambient i:nth-child(4){display:none}
.ambient i:nth-child(1){width:520px;height:420px;left:50%;top:-260px;margin-left:-260px;opacity:.32;background:radial-gradient(closest-side,var(--amb1),transparent)}
.ambient::after{background:linear-gradient(180deg,transparent 40%,rgba(7,8,12,.5))}
/* cards on the page: solid, one hairline, no rim light or inner glow */
.screen .glass,.screen .solid,.sheet .solid{background:var(--card);border:1px solid var(--card-line);box-shadow:none}
.screen .glass .label,.glass .label{color:var(--dim)}
/* primary button: a flat, confident fill */
.log{background:var(--accent);box-shadow:none}
.log::after{display:none}
.log:active{filter:brightness(.92)}
.btn2.solid,.chip{box-shadow:none}
/* floating glass keeps its blur, but no coloured glow */
.dock.glass{box-shadow:0 16px 36px -14px rgba(0,0,0,.8),inset 0 1px 0 rgba(255,255,255,.12)}
.glass:not(.screen .glass){box-shadow:0 20px 44px -18px rgba(0,0,0,.75),inset 0 1px 0 rgba(255,255,255,.1)}
.dock .ind{background:rgba(255,255,255,.09);box-shadow:none}
.app.compact .dock .tab.on{background:rgba(255,255,255,.09)}
.tab.on svg{color:var(--ink)}
.upcoming::before{display:none}

/* =====================================================================
   Food screen
   ===================================================================== */
#s-food{--mp:var(--accent);--mc:#FFD9A8;--mf:#8FE3C0}
.fdayrow{display:flex;align-items:flex-end;justify-content:space-between;gap:10px}
.fday{display:flex;align-items:center;gap:2px;height:40px;padding:0 4px;border-radius:999px;background:var(--card);border:1px solid var(--card-line);font-size:14px;font-weight:800}
.fday span{min-width:74px;text-align:center}
.iconbtn.sm{width:32px;height:32px;border-radius:50%;background:none;border:0}
.iconbtn.sm svg{width:18px;height:18px}
.iconbtn.sm:disabled{opacity:.25}
.fhero{margin-top:16px;width:100%;display:grid;grid-template-columns:auto 1fr;gap:18px;align-items:center;padding:18px;border-radius:30px;text-align:left;transition:transform .3s var(--ease)}
.fhero:active{transform:scale(.985)}
.fring{position:relative;width:128px;height:128px}
.fring svg{width:100%;height:100%;transform:rotate(-90deg)}
.fring circle{fill:none;stroke-width:11;stroke-linecap:round}
.fring .bg{stroke:rgba(255,255,255,.07)}
.fring .fg{stroke:var(--accent);transition:stroke-dashoffset 1.1s cubic-bezier(.22,1,.36,1),stroke .4s}
.fring .fg.over{stroke:#FF9A8A}
.fcenter{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center}
.fcenter b{font-size:28px;font-weight:800;letter-spacing:-.03em;line-height:1}
.fcenter span{margin-top:4px;font-size:11.5px;font-weight:800;color:var(--muted);letter-spacing:.02em}
.fmacs{display:flex;flex-direction:column;gap:11px;min-width:0}
.featen{display:flex;flex-direction:column;gap:1px}
.featen span,.fmh span{font-size:12px;font-weight:800;color:var(--dim);letter-spacing:.06em;text-transform:uppercase}
.featen b{font-size:17px;font-weight:800}
.featen small,.fmh small{color:var(--muted);font-weight:700;font-size:12.5px}
.fmh{display:flex;justify-content:space-between;align-items:baseline;gap:6px}
.fmh b{font-size:14px;font-weight:800;white-space:nowrap}
.fbar{display:block;height:7px;margin-top:5px;border-radius:99px;background:rgba(255,255,255,.07);overflow:hidden}
.fbar i{display:block;height:100%;border-radius:inherit;transform-origin:left;transition:transform 1.1s cubic-bezier(.22,1,.36,1)}
.fmac.p .fbar i{background:var(--mp)}
.fmac.c .fbar i{background:var(--mc)}
.fmac.f .fbar i{background:var(--mf)}
.fmac.p .fmh span{color:var(--mp)}.fmac.c .fmh span{color:var(--mc)}.fmac.f .fmh span{color:var(--mf)}
.fadd{margin-top:14px;display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.ftile{height:78px;border-radius:22px;background:var(--card);border:1px solid var(--card-line);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;font-size:12.5px;font-weight:800;color:var(--ink);transition:transform .35s cubic-bezier(.3,1.4,.5,1),background .25s}
.ftile svg{width:24px;height:24px;color:var(--accent)}
.ftile:active{transform:scale(.93);background:rgba(255,255,255,.07)}
#s-food .favrow{margin-top:10px}
.fback{margin-top:14px;width:100%}
.fwl{font-size:13px;font-weight:800;color:var(--muted)}
.fwater{display:grid;grid-template-columns:repeat(var(--n,8),1fr);gap:5px}
.fml i{font-style:normal;font-weight:900;margin-left:2px}.fml i:first-child{margin-left:0}.fml .p{color:var(--mp)}.fml .c{color:var(--mc)}.fml .f{color:var(--mf)}
.glass-w{height:46px;border-radius:12px 12px 14px 14px;background:var(--card);border:1px solid var(--card-line);position:relative;overflow:hidden;transition:transform .3s cubic-bezier(.3,1.5,.5,1)}
.glass-w i{position:absolute;left:0;right:0;bottom:0;height:100%;background:linear-gradient(180deg,rgba(143,200,255,.85),rgba(91,150,255,.75));transform:translateY(101%);transition:transform .6s cubic-bezier(.3,1.25,.4,1);border-radius:0 0 13px 13px}
.glass-w.on i{transform:none}
.glass-w.on{border-color:rgba(143,200,255,.35)}
.glass-w:active{transform:scale(.9)}
.fslot{margin-top:22px}
.fsk{font-size:13px;font-weight:800;color:var(--muted)}
.flist{list-style:none;border-radius:24px;overflow:hidden;padding:4px}
.frow{overflow:hidden;transition:height .38s cubic-bezier(.4,0,.2,1),opacity .25s,transform .38s cubic-bezier(.4,0,.2,1)}
.frow + .frow{border-top:1px solid rgba(255,255,255,.05)}
.frow.folding{opacity:0;transform:translateX(-24px) scale(.98)}
.fmain{width:100%;display:flex;align-items:center;gap:12px;padding:10px;border-radius:20px;text-align:left;transition:background .2s}
.fmain:active{background:rgba(255,255,255,.05)}
.fthumb{width:46px;height:46px;border-radius:14px;object-fit:cover;flex:none}
.fthumb.ic{display:grid;place-items:center;background:rgba(255,255,255,.06);color:var(--accent)}
.fthumb.ic svg{width:22px;height:22px}
.fmain .l{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.fmain strong{font-size:15.5px;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fmain small{font-size:12.5px;color:var(--muted);font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fk{font-size:16px;font-weight:800;text-align:right;display:flex;flex-direction:column;line-height:1.1}
.fk small{font-size:11px;color:var(--dim);font-weight:800}
.frow.fresh{animation:fresh 1.4s cubic-bezier(.22,1,.36,1)}
@keyframes fresh{0%{opacity:0;transform:translateY(-10px) scale(.96);background:rgba(var(--a-rgb),.25)}35%{opacity:1;transform:none;background:rgba(var(--a-rgb),.18)}100%{background:transparent}}
.fempty{margin-top:22px;padding:28px 20px;border-radius:26px;border:1px dashed rgba(255,255,255,.12);display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center}
.fei{width:52px;height:52px;border-radius:18px;display:grid;place-items:center;background:rgba(var(--a-rgb),.12);color:var(--accent);margin-bottom:4px}
.fei svg{width:26px;height:26px}
.fempty strong{font-size:16px;font-weight:800}
.fempty small{font-size:13.5px;color:var(--muted);font-weight:600;max-width:260px}
.fquick{margin-top:10px;font-size:13px;color:var(--muted);font-weight:700;text-align:center}
.fweek{position:relative;height:150px;border-radius:24px;padding:14px 10px 30px;display:grid;grid-template-columns:repeat(7,1fr);gap:6px;align-items:end}
.ftarget{position:absolute;left:10px;right:10px;height:0;border-top:1.5px dashed rgba(255,255,255,.22);margin-bottom:30px;pointer-events:none}
.fwd{position:relative;height:100%;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;border-radius:12px}
.fwd span{position:absolute;bottom:-22px;font-size:11.5px;font-weight:800;color:var(--dim)}
.fwd.on span{color:var(--ink)}
.fwb{display:block;width:100%;max-width:26px;height:100%;border-radius:8px 8px 5px 5px;background:rgba(var(--a-rgb),.35);transform-origin:bottom;transform:scaleY(var(--h));transition:transform .9s cubic-bezier(.22,1,.36,1),background .3s}
.fwd.on .fwb{background:var(--accent)}
.fwb.hi{background:rgba(255,154,138,.55)}
.fwp{position:absolute;left:50%;bottom:calc(var(--p) * 100%);width:6px;height:6px;margin-left:-3px;border-radius:50%;background:var(--ink);opacity:.8;transition:bottom .9s cubic-bezier(.22,1,.36,1)}
.fnote{margin-top:12px;font-size:12.5px;color:var(--dim);font-weight:600;text-align:center}
/* entrance: parts rise in, bars grow from zero */
#s-food.enter .fhero{animation:rise .6s var(--ease) both}
#s-food.enter .ftile{animation:rise .55s var(--ease) both;animation-delay:calc(.08s + var(--i) * .05s)}
#s-food.enter .glass-w{animation:rise .5s var(--ease) both;animation-delay:calc(.15s + var(--i) * .03s)}
#s-food.enter .frow{animation:rise .55s var(--ease) both;animation-delay:calc(.2s + var(--i) * .04s)}
#s-food.enter .fwb{animation:grow .9s cubic-bezier(.22,1,.36,1) both;animation-delay:calc(.25s + var(--i) * .05s)}
@keyframes rise{from{opacity:0;transform:translateY(14px)}}
@keyframes grow{from{transform:scaleY(0)}}
/* changing day: the page slides from that side */
#s-food.fslide-r > :not(.top){animation:fsr .45s cubic-bezier(.22,1,.36,1)}
#s-food.fslide-l > :not(.top){animation:fsl .45s cubic-bezier(.22,1,.36,1)}
@keyframes fsr{from{opacity:0;transform:translateX(28px)}}
@keyframes fsl{from{opacity:0;transform:translateX(-28px)}}
/* meal sheet */
.fphoto{width:100%;height:180px;object-fit:cover;border-radius:22px;margin-bottom:14px;animation:rise .5s var(--ease)}
.fbig{margin-top:12px;display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.fbig div{padding:12px 6px;border-radius:18px;background:var(--card);border:1px solid var(--card-line);display:flex;flex-direction:column;align-items:center;gap:2px;animation:rise .45s var(--ease) both}
.fbig div:nth-child(2){animation-delay:.04s}.fbig div:nth-child(3){animation-delay:.08s}.fbig div:nth-child(4){animation-delay:.12s}
.fbig b{font-size:20px;font-weight:800}
.fbig span{font-size:11.5px;font-weight:800;color:var(--dim)}
.fbig .p b{color:var(--accent)}.fbig .c b{color:#FFD9A8}.fbig .f b{color:#8FE3C0}
.acts.row3{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.acts.row3 .btn2{flex-direction:column;height:64px;gap:4px;font-size:12.5px}
/* Today's food card */
.foodcard{cursor:pointer;transition:transform .3s var(--ease)}
.foodcard:active{transform:scale(.97)}
.foodcard .fgo{color:var(--dim);margin-left:2px}
.foodcard .pring b small{font-size:9px;color:var(--muted)}
.foodcard .bsub strong{color:var(--ink);font-size:15px}
html[data-motion=off] #s-food *{animation:none!important}
/* scanner 1.14: video eases in once the camera is live, recent products above the buttons */
.scanview video{animation:none;opacity:0;transform:scale(1.04);transition:opacity .35s ease,transform .6s cubic-bezier(.22,1,.36,1)}
.scanview.is-live video{opacity:1;transform:none}
.scanview.got video{filter:brightness(.7) saturate(.8);transition:filter .3s}
.scanwin{transition:translate .32s cubic-bezier(.3,1.3,.5,1),scale .32s cubic-bezier(.3,1.3,.5,1),box-shadow .3s}
.scanbottom{position:absolute;left:0;right:0;bottom:calc(var(--safe-bottom) + 20px);z-index:2;display:flex;flex-direction:column;gap:12px}
.scanbottom .scanbar{position:static}
.scanrecent{display:flex;gap:8px;overflow-x:auto;padding:0 16px;scrollbar-width:none;scroll-snap-type:x proximity}
.scanrecent::-webkit-scrollbar{display:none}
.srchip{flex:none;display:flex;align-items:center;gap:8px;height:48px;max-width:190px;padding:0 14px 0 5px;border-radius:999px;scroll-snap-align:start;
  background:rgba(20,22,30,.55);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border:1px solid rgba(255,255,255,.12);color:#fff;font-size:13px;font-weight:800;
  animation:rise .45s var(--ease) both;animation-delay:calc(.15s + var(--i) * .04s);transition:transform .3s cubic-bezier(.3,1.4,.5,1)}
.srchip:active{transform:scale(.94)}
.srchip img,.srchip .pi{width:38px;height:38px;border-radius:50%;object-fit:cover;background:#fff;flex:none}
.srchip .pi{display:grid;place-items:center;background:rgba(255,255,255,.1)}
.srchip .pi svg{width:18px;height:18px}
.srchip span:last-child{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* =====================================================================
   1.14: the second restraint pass. Every bar, meter and fill is one
   solid colour (no violet-to-lilac sweeps); state is shown by colour
   alone, never by a tinted card; one spacing rhythm on Today and Food.
   ===================================================================== */
.toast .bar,.intent .bar,.obbar i,.gbar .fill,.mrow i b,.cbar i{background:var(--accent)}
.obrange::-webkit-slider-runnable-track{background:rgba(var(--a-rgb),.35)}
.wave i{background:var(--accent)}
.mrow.full i b,.gcard.done .gbar .fill,.gcard.ahead .gbar .fill{background:#8FE3C0}
.mnum.hot{background:rgba(var(--a-rgb),.1)}
.dnudge{background:var(--card);border-color:var(--card-line)}
.pav{background:rgba(var(--a-rgb),.16);color:var(--accent)}
.ivm.me{background:rgba(var(--a-rgb),.16)}
/* spacing: 28 above a section title, 10 below it, 12 between cards */
.section{margin:28px 4px 10px}
:is(#s-today,#s-food) > :is(.glass,.solid,.upcoming,.grid2,.grid3,.mealwrap,.favrow,.crow,.dnudge,.fhero,.fadd,.fwater,.flist,.fweek,.fempty,.gcard,.rlist) + :is(.glass,.solid,.upcoming,.grid2,.grid3,.mealwrap,.favrow,.crow,.dnudge,.gcard,.fadd,.fwater){margin-top:12px}
:is(#s-today,#s-food) > .section + *{margin-top:0}

/* 1.14: settings rows wrap instead of squeezing the label into a sliver; the control drops under it */
.srow{flex-wrap:wrap;row-gap:10px}
.srow .l{flex:1 1 128px}
.srow > :not(.l){margin-left:auto;max-width:100%}
.srow strong{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* 1.14: weight and reps each in their own panel, big −/+ targets, no crowding in the middle */
.hero .cols{grid-template-columns:1fr 1fr;gap:10px;align-items:stretch}
.hero .times{display:none}
.hero .col{padding:12px 8px 14px;border-radius:22px;background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.05);gap:8px}
.hero .row3{gap:4px}
.hero .step{width:40px;height:40px;border-radius:14px;font-size:22px}
.hero .num{font-size:46px;max-width:none}
.hero .col:focus-within{border-color:rgba(var(--a-rgb),.35);background:rgba(var(--a-rgb),.06)}
/* session highlights on a workout */
.hl{margin-top:12px;padding:16px;border-radius:26px}
.hlhead strong{display:block;font-size:18px;font-weight:800;letter-spacing:-.01em}
.hlhead span{display:block;margin-top:3px;font-size:13px;color:var(--muted);font-weight:700}
.hl ul{list-style:none;margin-top:12px;display:flex;flex-direction:column}
.hl li{display:grid;grid-template-columns:26px 1fr auto auto;align-items:center;gap:10px;padding:9px 0;border-top:1px solid rgba(255,255,255,.05)}
.hl .ar{width:26px;height:26px;border-radius:9px;display:grid;place-items:center;font-size:14px;font-weight:900;background:rgba(255,255,255,.06);color:var(--muted)}
.hl li.up .ar{background:rgba(143,227,192,.14);color:#8FE3C0}
.hl li.down .ar{background:rgba(255,154,138,.12);color:#FF9A8A}
.hl li.new .ar{color:var(--accent)}
.hl .n{font-size:14.5px;font-weight:800;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hl .s{font-size:14px;font-weight:800;text-align:right;display:flex;flex-direction:column;line-height:1.15}
.hl .s small{font-size:11.5px;color:var(--dim);font-weight:700}
.hl .d{font-size:13px;font-weight:800;min-width:54px;text-align:right}
.hl li.up .d{color:#8FE3C0}.hl li.down .d{color:#FF9A8A}
.hlnote{margin-top:8px;font-size:11.5px;color:var(--dim);font-weight:600}
.screen.enter .hl li{animation:rise .5s var(--ease) both;animation-delay:calc(.15s + var(--i) * .05s)}
.hlhead span::first-letter{text-transform:uppercase}
.fqp{margin-top:12px;display:flex;align-items:center;gap:8px}
.fqp span{flex:1;font-size:13px;font-weight:800;color:var(--muted)}
.foodcard{min-height:0}

/* the app's top edge is the status bar's colour (--bg) and melts into the glow below, so bar and app read as one. */
.ambient::before{content:"";position:absolute;left:0;right:0;top:0;height:calc(var(--safe-top) + 150px);z-index:1;pointer-events:none;
  background:linear-gradient(var(--bg) 0,color-mix(in srgb,var(--bg) 85%,transparent) 22%,transparent 100%)}
/* 1.21: the status bar is the app's own colour (no black band); the top edge melts into it */
.edge.et::before{opacity:1;background:linear-gradient(var(--bg),color-mix(in srgb,var(--bg) 70%,transparent) 30%,transparent)}
.app.under-top .edge.et::before{opacity:1}
.sbody .btn2.wide{width:100%;margin-top:12px}
/* reorder rows in Customize */
.srow.ord{flex-wrap:nowrap}
.srow.ord .l{flex:1 1 auto}
.ordbtns{display:flex;gap:2px;margin-left:auto}
.ordbtns .iconbtn.sm{background:rgba(255,255,255,.05)}
.ordbtns .dn svg{transform:rotate(180deg)}
.togph{width:52px;flex:none}
.srow.ord > .toggle{margin-left:6px}
.qvals{margin-top:10px;display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.qvals .stepper{justify-content:space-between;padding:4px;border-radius:16px;background:var(--card);border:1px solid var(--card-line)}
.qvals .stepper b{font-size:15px}
.fsheet .fedit{margin-top:14px;flex-direction:row}
.freal{margin-top:14px;padding:14px 16px;border-radius:20px;display:flex;flex-direction:column;gap:6px}
.freal strong{font-size:15.5px;font-weight:800}
.freal span{font-size:13px;color:var(--muted);font-weight:600;line-height:1.4}
.freal .btn2{margin-top:6px;align-self:flex-start}
.qvals{gap:6px}
.qvals .stepper{min-width:0;gap:2px;padding:3px}
.qvals .step{width:30px;height:30px;border-radius:10px;font-size:17px}
.qvals .stepper b{flex:1;min-width:0;text-align:center;font-size:14px}
/* empty workout: your lifts, one tap each */
.qlifts{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.qlift{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:20px;text-align:left;font-size:14px;font-weight:800;animation:rise .45s var(--ease) both;animation-delay:calc(var(--i) * .04s);transition:transform .3s cubic-bezier(.3,1.4,.5,1)}
.qlift:active{transform:scale(.96)}
.qlift .qfig{width:34px;height:38px}
.qlift span{min-width:0;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.wsay{margin-top:16px;justify-content:center;text-align:center}
/* coach memory + weekly check-in */
.memlink{margin-top:12px}
.memlist{list-style:none;display:flex;flex-direction:column;gap:6px;margin:12px 0}
.memlist li{display:flex;align-items:center;gap:10px;padding:10px 8px 10px 14px;border-radius:16px;background:var(--card);border:1px solid var(--card-line);font-size:14.5px;font-weight:700;animation:rise .4s var(--ease) both}
.memlist li span{flex:1;min-width:0}
.memnote{display:flex;align-items:center;gap:6px;margin-top:10px;font-size:12.5px;font-weight:800;color:var(--accent)}
.memnote svg{width:14px;height:14px;flex:none}
.wkhead{display:flex;align-items:center;gap:6px;margin-bottom:8px;font-size:12px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--accent)}
.wkhead svg{width:15px;height:15px}
.wkcard{margin-top:16px;width:100%;display:flex;align-items:center;gap:12px;padding:14px;border-radius:24px;text-align:left;animation:rise .55s var(--ease) both}
.wkcard .wki{width:42px;height:42px;border-radius:14px;display:grid;place-items:center;background:rgba(var(--a-rgb),.14);color:var(--accent);flex:none}
.wkcard .wki svg{width:22px;height:22px}
.wkcard .l{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.wkcard strong{font-size:15.5px;font-weight:800}
.wkcard small{font-size:13px;color:var(--muted);font-weight:600;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.wkcard > svg{width:18px;height:18px;color:var(--dim);flex:none}

/* food search */
.fsearch{display:flex;flex-direction:column;gap:12px;min-height:100%}
.fsres{display:flex;flex-direction:column;gap:12px;padding-bottom:24px}
.fsres .flist{padding:4px}
.sres + .sres{border-top:1px solid rgba(255,255,255,.05)}
.sres .fmain > svg{width:16px;height:16px;color:var(--dim);flex:none}
.sres .l strong{font-size:15px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sres .l small{font-size:12.5px;color:var(--muted);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fsres.anim .sres{animation:rise .4s var(--ease) both;animation-delay:calc(min(var(--i),8) * .03s)}
.sai{border-radius:20px;justify-content:flex-start}
.sai > svg:first-child{width:22px;height:22px;color:var(--accent);flex:none}
.sai .l{flex:1}
.sai > svg:last-child{width:16px;height:16px;color:var(--dim);flex:none}

/* plateau: a stalled lift and what to change */
.plopts{display:grid;gap:8px}
.plopt{display:flex;align-items:center;gap:12px;width:100%;text-align:left;padding:13px 14px;border-radius:18px;background:rgba(255,255,255,.05);border:1px solid var(--line);transition:transform .3s cubic-bezier(.3,1.4,.5,1),background .2s}
.plopt:active{transform:scale(.97);background:rgba(255,255,255,.09)}
.plopt .l{flex:1;min-width:0;display:grid;gap:2px}
.plopt strong{font-size:15px;font-weight:800}
.plopt small{font-size:12.5px;color:var(--muted);font-weight:600}
.plopt > svg{width:18px;height:18px;color:var(--accent);flex:none}
.plfoot{display:flex;justify-content:space-between;align-items:center;margin-top:-4px}
.plfoot .textbtn{display:inline-flex;align-items:center;gap:6px}
.plfoot .textbtn svg{width:16px;height:16px}
.plfoot .textbtn.dim{color:var(--muted)}

/* this month, side by side */
.mcard{margin-top:16px;padding:16px;border-radius:26px;display:grid;gap:12px}
.mpair{display:grid;grid-template-columns:1fr 1fr;gap:8px;width:100%}
.mpair figure{position:relative;margin:0;border-radius:18px;overflow:hidden;aspect-ratio:3/4;background:#000}
.mpair img{width:100%;height:100%;object-fit:cover;display:block}
.mpair figcaption{position:absolute;left:8px;bottom:8px;padding:4px 9px;border-radius:99px;background:rgba(0,0,0,.55);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);font-size:11.5px;font-weight:800;color:#fff}
.mpair:active figure{transform:scale(.98)}
.mpair figure{transition:transform .3s cubic-bezier(.3,1.4,.5,1)}
.mstats{display:grid;grid-template-columns:repeat(auto-fit,minmax(0,1fr));gap:8px}
.mstats div{display:grid;gap:2px;padding:10px 12px;border-radius:16px;background:rgba(255,255,255,.04)}
.mstats b{font-size:20px;font-weight:800;letter-spacing:-.02em}
.mstats span{font-size:12px;color:var(--muted);font-weight:700}

.mtoday{display:flex;align-items:center;gap:12px;width:100%;text-align:left;margin-top:12px;padding:12px 14px;border-radius:22px}
.mtoday .mth{display:flex;flex:none}
.mtoday .mth img{width:38px;height:50px;border-radius:10px;object-fit:cover;border:2px solid var(--card)}
.mtoday .mth img + img{margin-left:-10px}
.mtoday .mth.ic{width:44px;height:44px;border-radius:14px;display:grid;place-items:center;background:rgba(255,255,255,.06);color:var(--accent)}
.mtoday .mth.ic svg{width:22px;height:22px}
.mtoday .l{flex:1;min-width:0;display:grid;gap:2px}
.mtoday strong{font-size:15px;font-weight:800}
.mtoday small{font-size:12.5px;color:var(--muted);font-weight:600}
.mtoday > svg{width:16px;height:16px;color:var(--dim);flex:none}

/* coach brief */
textarea.brief{width:100%;margin-top:8px;padding:14px;border-radius:18px;font:inherit;font-size:15px;line-height:1.45;color:var(--ink);resize:vertical;min-height:150px;outline:none}
textarea.brief:focus{box-shadow:0 0 0 2px var(--accent)}
.briefbar{display:flex;align-items:center;justify-content:space-between;margin-top:8px}
.briefbar small{color:var(--dim);font-size:12px;font-weight:700}
.briefbar .btn2{height:40px;padding:0 16px}
.srow > svg.i{margin-left:auto;width:18px;height:18px;max-width:18px;flex:none}

/* 1.21: look & feel */
html[data-text=small] :is(.screen,.sheet){zoom:.92}
html[data-text=large] :is(.screen,.sheet){zoom:1.1}
html[data-glow=soft] .ambient > i{opacity:.45}
html[data-glow=off] .ambient > i{display:none}
html[data-dock=icons] .dock .tab span{display:none}
.pcard .pacts{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px}
.pcard .pacts > button{width:auto;min-width:0;margin-top:14px}
.pcard .pacts .log span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pcard .pacts .btn2{padding:0 18px}

/* 1.22: the composer's own orb: tap and talk, the words land in the box */
.corb{width:42px;height:42px;flex:none;display:grid;place-items:center;border-radius:50%;transition:transform .35s cubic-bezier(.3,1.5,.5,1)}
.corb .orb{--s:34px;transform:scale(calc(1 + var(--lv, 0) * .35));transition:transform .08s linear}
.corb:active{transform:scale(.9)}
.composer.dictating .corb .orb .core{animation:breathe 1.2s ease-in-out infinite}
.composer.dictating{box-shadow:0 0 0 1.5px rgba(var(--a-rgb),.55),0 18px 40px -16px rgba(var(--v-rgb),.7)}
.composer.hearing .corb .orb{animation:spinlite 1s linear infinite}
@keyframes spinlite{to{filter:hue-rotate(40deg)}}
.composer input{padding-left:2px}

/* 1.22: the Coach thinking, and a soft finish */
.think{display:inline-flex;align-items:center;gap:10px;padding:2px 0}
.think .orb{--s:22px}
.think .orb .core{animation:breathe 1.6s ease-in-out infinite}
.think .tl{font-weight:700;background:linear-gradient(90deg,var(--muted) 0%,var(--ink) 45%,var(--muted) 90%);background-size:220% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:shimmer 1.8s linear infinite}
@keyframes shimmer{from{background-position:120% 0}to{background-position:-100% 0}}
.msg.ai:not(.is-streaming):not(.seen) .bub{animation:settle .9s ease-out}
@keyframes settle{0%{box-shadow:0 0 0 1px rgba(var(--a-rgb),.45),0 0 24px -6px rgba(var(--a-rgb),.55)}100%{box-shadow:0 0 0 1px transparent,0 0 0 0 transparent}}
.msg.ai .bub{backdrop-filter:blur(14px) saturate(140%);-webkit-backdrop-filter:blur(14px) saturate(140%)}
.msg.is-streaming .bub{transition:height .2s}

/* targets that add up: the numbers that followed your change glow for a moment */
.stepper b.synced{animation:synced .8s ease-out}
@keyframes synced{0%{color:var(--accent);transform:scale(1.12)}100%{color:inherit;transform:none}}
.fsplit{display:flex;gap:3px;height:8px;margin-top:14px;border-radius:99px;overflow:hidden}
.fsplit i{transition:flex .5s var(--ease)}
.fsplit .p{background:var(--accent)}.fsplit .c{background:#7EC8F2}.fsplit .f{background:#F2C27E}

/* ---------- 1.22: liquid glass bottom bar ---------- */
.dock.glass{--gl-fill:rgba(18,20,28,.64);
  background:
    radial-gradient(90% 120% at 50% -30%,rgba(255,255,255,.16),rgba(255,255,255,0) 60%) padding-box,
    linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,0) 50%,rgba(0,0,0,.08)) padding-box,
    linear-gradient(var(--gl-fill),var(--gl-fill)) padding-box,
    linear-gradient(170deg,rgba(255,255,255,.5),rgba(255,255,255,.08) 28%,rgba(255,255,255,.03) 60%,rgba(var(--a-rgb),.35)) border-box;
  border:1px solid transparent;
  -webkit-backdrop-filter:blur(26px) saturate(210%) brightness(1.08);backdrop-filter:blur(26px) saturate(210%) brightness(1.08);
  box-shadow:0 22px 44px -14px rgba(0,0,0,.8),0 6px 14px -6px rgba(0,0,0,.5),inset 0 1px 1px rgba(255,255,255,.28),inset 0 -1px 1px rgba(255,255,255,.05),inset 0 -16px 26px -20px rgba(var(--v-rgb),.45)}
/* the lens under the active tab: glassy, with a highlight, and it stretches as it moves */
.dock .ind{top:7px;height:58px;border-radius:26px;
  background:radial-gradient(120% 90% at 50% 0%,rgba(255,255,255,.3),rgba(255,255,255,.04) 58%,rgba(255,255,255,0)),rgba(var(--a-rgb),.13);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.4),inset 0 -1px 0 rgba(255,255,255,.06),inset 0 0 0 1px rgba(255,255,255,.08),0 10px 24px -10px rgba(var(--v-rgb),.7);
  transition:transform .62s cubic-bezier(.3,1.3,.45,1),width .62s cubic-bezier(.3,1.3,.45,1),opacity .3s}
.dock .ind.moving{animation:liquid2 .62s cubic-bezier(.3,1.1,.45,1)}
@keyframes liquid2{0%{scale:1 1}30%{scale:1.1 .92}65%{scale:.98 1.03}100%{scale:1 1}}
.tab{color:rgba(236,236,245,.62)}
.tab svg.ti{width:25px;height:25px;stroke-width:1.75;transition:transform .5s cubic-bezier(.3,1.5,.45,1),color .3s}
.tab svg.ti .fl{fill:currentColor;fill-opacity:0;transition:fill-opacity .35s}
.tab svg.ti .sp{fill:currentColor;stroke:none}
.tab.on svg.ti{color:var(--accent);animation:none;transform:translateY(-1px) scale(1.06)}
.tab.on svg.ti .fl{fill-opacity:.22}
.tab.on{color:var(--ink)}
.tab:active svg.ti{transform:scale(.86)}
.tab span{font-size:10.5px;letter-spacing:.01em}
/* shrinking into the pill and back: one spring for every part */
.dock{--dk:cubic-bezier(.34,1.15,.4,1);will-change:left,right}
.app.compact:not(.is-sub):not(.voice):not(.kb) .dock{border-radius:34px;box-shadow:0 16px 34px -12px rgba(0,0,0,.85),inset 0 1px 1px rgba(255,255,255,.3)}
.app.compact .dock .tab.on{background:radial-gradient(120% 90% at 50% 0%,rgba(255,255,255,.24),rgba(255,255,255,0) 60%),rgba(var(--a-rgb),.14);box-shadow:inset 0 1px 0 rgba(255,255,255,.3)}
.app.compact .dock .tab.on svg.ti{transform:translateY(7px) scale(1.02)}

/* ---------- 1.22: the top edge: a soft progressive blur into the status bar ---------- */
.edge.et{height:calc(var(--safe-top) + 72px)}
.edge.et::before{opacity:1;background:linear-gradient(180deg,var(--bg) 0,color-mix(in srgb,var(--bg) 88%,transparent) calc(var(--safe-top) * .9),color-mix(in srgb,var(--bg) 55%,transparent) calc(var(--safe-top) + 22px),color-mix(in srgb,var(--bg) 0%,transparent) 100%)}
.edge.et::after{-webkit-backdrop-filter:blur(16px) saturate(170%);backdrop-filter:blur(16px) saturate(170%);
  -webkit-mask-image:linear-gradient(#000 0,#000 calc(var(--safe-top) + 6px),rgba(0,0,0,.5) calc(var(--safe-top) + 34px),transparent);
  mask-image:linear-gradient(#000 0,#000 calc(var(--safe-top) + 6px),rgba(0,0,0,.5) calc(var(--safe-top) + 34px),transparent);opacity:0}
.app.under-top .edge.et::after{opacity:1}

/* ---------- 1.22: the Workout tab as a hub ---------- */
.wplan{display:grid;grid-template-columns:repeat(7,1fr);gap:5px}
.wpday{display:flex;flex-direction:column;align-items:center;gap:6px;padding:10px 2px 10px;border-radius:16px;background:var(--card);border:1px solid var(--card-line);min-width:0;animation:rise .5s var(--ease) both;animation-delay:calc(var(--i) * .035s);transition:transform .3s cubic-bezier(.3,1.5,.5,1)}
.wpday:not(:disabled):active{transform:scale(.93)}
.wpday .wd{font-size:11px;font-weight:800;color:var(--muted);text-transform:capitalize}
.wpday .wdot{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;border:1.5px solid rgba(255,255,255,.14)}
.wpday .wdot svg{width:13px;height:13px;stroke-width:3}
.wpday .wr{font-size:10px;font-weight:700;line-height:1.2;color:var(--ink);text-align:center;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;max-width:100%;padding:0 2px}
.wpday.rest .wr{color:var(--dim)}
.wpday.done .wdot{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.wpday.today{border-color:rgba(var(--a-rgb),.55);background:radial-gradient(120% 90% at 50% 0%,rgba(var(--a-rgb),.16),rgba(var(--a-rgb),0) 70%),var(--card)}
.wpday.today .wd{color:var(--accent)}
.wpday.missed .wdot{border-style:dashed;opacity:.6}
.tgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:12px}
.ttile{display:flex;flex-direction:column;align-items:flex-start;gap:4px;padding:14px 12px;border-radius:20px;text-align:left;min-width:0;transition:transform .3s cubic-bezier(.3,1.5,.5,1)}
.ttile:active{transform:scale(.95)}
.ttile .tic{width:34px;height:34px;border-radius:11px;display:grid;place-items:center;background:rgba(var(--a-rgb),.12);color:var(--accent);margin-bottom:4px}
.ttile .tic svg{width:19px;height:19px}
.ttile strong{font-size:14px;font-weight:800}
.ttile small{font-size:11.5px;color:var(--muted);font-weight:600;line-height:1.3}
#s-workout > .upcoming{margin-top:12px}
.dayopts{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;margin:10px -20px 4px;padding:0 20px}
.dayopts .chip{flex:none;text-transform:capitalize}
.msg.is-streaming .bub > .think::after{display:none}
.wplan.open .wr{display:none}
.wphint{margin-top:8px}

/* repeat yesterday, saved meals */
.frepeat{display:grid;gap:8px;margin-top:14px}
.frep{display:flex;align-items:center;gap:12px;width:100%;padding:12px 14px;border-radius:20px;text-align:left;border:1px dashed rgba(var(--a-rgb),.3);animation:rise .5s var(--ease) both;animation-delay:calc(var(--i) * .06s);transition:transform .3s cubic-bezier(.3,1.5,.5,1)}
.frep:active{transform:scale(.97)}
.frep .fri{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;background:rgba(var(--a-rgb),.12);color:var(--accent);flex:none}
.frep .fri svg{width:19px;height:19px}
.frep .l{flex:1;min-width:0;display:grid;gap:2px}
.frep strong{font-size:14.5px;font-weight:800}
.frep small{font-size:12px;color:var(--muted);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.frep b{font-size:15px;font-weight:800;text-align:right}.frep b small{display:block;font-size:10.5px;color:var(--dim)}
.fsave{margin-left:8px;width:28px;height:28px;border-radius:9px;display:inline-grid;place-items:center;color:var(--muted);vertical-align:middle;background:rgba(255,255,255,.05)}
.fsave svg{width:15px;height:15px}
.fsave:active{transform:scale(.9)}
.favchip.tpl .fi{color:var(--accent)}
.favchip.tpl .fi svg{width:18px;height:18px}
.favchip.logged{animation:pop .5s var(--ease)}

/* ---------- 1.23: the Coach ---------- */
/* on Coach the orb leaves the dock (its column closes) and lives in the message box */
.app.coaching .dock .orbbtn{transform:scale(.6);opacity:0;pointer-events:none}
.orbbtn{transition:transform .45s var(--dk),margin .5s var(--dk),opacity .2s ease}
.app.orbflying .dock .orbbtn{opacity:0!important;transition:none}
.app.orbflying .corb .orb{opacity:0;transition:none}
.orbfly{position:absolute;z-index:20;pointer-events:none;will-change:transform;margin:0}
/* the box: lifts with the keyboard (transform only, so it never jumps), the dock steps aside */
.composer{transition:opacity .35s var(--ease),transform .42s cubic-bezier(.2,.9,.25,1),box-shadow .4s}
.app.coaching.inputting:not(.is-sub):not(.voice) .composer{transform:translateY(calc(var(--dock-h) + 4px))}
.app.coaching.kb:not(.is-sub):not(.voice) .composer{transform:translateY(calc(var(--dock-bottom) + var(--dock-h) - var(--kb, 0px)))}
.app.coaching.inputting .screen#s-coach,.app.coaching.kb .screen#s-coach{padding-bottom:calc(var(--kb, 0px) + 90px)}
.composer .csend{flex:none;transition:transform .4s cubic-bezier(.3,1.5,.5,1),opacity .2s,width .35s var(--ease),margin .35s var(--ease)}
.composer:has(input:placeholder-shown) .csend:not(.stop){transform:scale(.3);opacity:0;width:0;margin-left:-8px;pointer-events:none}
.composer.talking{box-shadow:0 0 0 1.5px rgba(var(--a-rgb),.55),0 18px 44px -14px rgba(var(--v-rgb),.85)}
.composer.talking input::placeholder{color:var(--ink);opacity:.85}
.composer[data-talk=listening] .corb .orb,.composer[data-talk=hearing] .corb .orb{transform:scale(calc(1.06 + var(--lv, 0) * .5))}
.composer[data-talk=thinking] .corb .orb .core,.composer[data-talk=hearing] .corb .orb .core{animation:breathe .9s ease-in-out infinite}
.composer[data-talk=speaking] .corb .orb{animation:talk .8s ease-in-out infinite alternate}
.corb .orb{--s:34px}

/* replies: no box, just the words, which blur in lit by the accent and settle */
.msg.ai .bub{background:none;border:0;padding:4px 2px;max-width:100%;-webkit-backdrop-filter:none;backdrop-filter:none;font-size:16px;line-height:1.55;font-weight:560;color:rgba(241,240,246,.94)}
.msg.ai.weekly .bub,.msg.ai.plan .bub,.msg.ai.is-err .bub,.msg.ai.stopped .bub{background:rgba(25,28,37,.72);border:1px solid var(--line);padding:12px 15px;border-radius:22px}
.msg.me .bub{border-radius:22px;border-bottom-right-radius:8px;padding:11px 15px}
.msg.is-streaming .bub > :last-child::after{display:none}
.bub .w{display:inline-block;animation:wordin .65s cubic-bezier(.2,.8,.2,1) both}
@keyframes wordin{0%{opacity:0;filter:blur(9px);transform:translateY(.3em) scale(.96);color:var(--accent-hi);text-shadow:0 0 16px rgba(var(--a-rgb),.9)}55%{opacity:1;filter:blur(0);color:var(--accent-hi);text-shadow:0 0 10px rgba(var(--a-rgb),.35)}100%{opacity:1;filter:none;transform:none}}
.msg.ai:not(.is-streaming):not(.seen) .bub{animation:none}

/* thinking: the bubble gets a glow that runs round its edge, the orb breathes, the steps change */
@property --ang{syntax:'<angle>';initial-value:0deg;inherits:false}
.msg.ai.is-thinking .bub{position:relative;isolation:isolate;padding:12px 16px;border-radius:24px;background:rgba(22,24,33,.7);max-width:max-content}
.msg.ai.is-thinking .bub::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1.5px;background:conic-gradient(from var(--ang),rgba(var(--a-rgb),0) 0 15%,var(--accent) 30%,var(--blue) 45%,rgba(var(--a-rgb),0) 62% 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);animation:angspin 2.2s linear infinite;pointer-events:none}
.msg.ai.is-thinking .bub::after{content:"";position:absolute;inset:-14px;border-radius:34px;background:radial-gradient(closest-side,rgba(var(--v-rgb),.4),transparent);filter:blur(16px);z-index:-1;animation:breathe 2.4s ease-in-out infinite;pointer-events:none}
@keyframes angspin{to{--ang:360deg}}
.think{display:inline-flex;align-items:center;gap:11px}
.think .orb{--s:24px}
.think .tsteps{display:grid;min-width:170px}
.think .tl{grid-area:1/1;opacity:0;font-weight:700;background:linear-gradient(90deg,var(--muted) 0%,var(--ink) 45%,var(--muted) 90%);background-size:220% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;
  animation:shimmer 1.8s linear infinite,stepcycle 8s ease infinite;animation-delay:0s,calc(var(--i) * 2s)}
@keyframes stepcycle{0%{opacity:0;transform:translateY(7px);filter:blur(4px)}5%,21%{opacity:1;transform:none;filter:none}26%,100%{opacity:0;transform:translateY(-7px);filter:blur(4px)}}

/* ---------- 1.23: the top edge ---------- */
/* the status bar's colour at the very top, melting into the glow within a finger's width */
.app{background:linear-gradient(var(--edge) 0,var(--edge) var(--safe-top),var(--bg) calc(var(--safe-top) + 260px))}
.ambient::before{background:linear-gradient(var(--edge) 0,var(--edge) var(--safe-top),color-mix(in srgb,var(--edge) 55%,transparent) calc(var(--safe-top) + 26px),transparent calc(var(--safe-top) + 90px));height:calc(var(--safe-top) + 90px)}
.edge.et::before{background:linear-gradient(var(--edge) 0,var(--edge) var(--safe-top),color-mix(in srgb,var(--edge) 60%,transparent) calc(var(--safe-top) + 18px),transparent)}
.ambient i:nth-child(1){top:-200px;opacity:.36}
.tabtop{height:10px}
.app.coaching .intent,.app.coaching .toast{bottom:calc(var(--dock-bottom) + var(--dock-h) + 76px)}
.app.coaching.inputting .intent,.app.coaching.kb .intent{bottom:calc(var(--kb, 0px) + 76px)}
.upcoming.setup p{margin-top:6px}
.upcoming.setup .log{margin-top:16px}
.setupalt{display:flex;justify-content:center;gap:22px;margin-top:12px}

/* the top overlay only shows once content slides under it (so titles at rest stay crisp) */
.edge.et::before{opacity:0;transition:opacity .35s var(--ease)}
.app.under-top .edge.et::before,.app.is-sub.under-top .edge.et::before{opacity:1}
/* Today: no brand line, just the greeting with Settings beside it */
#s-today > .brand{position:absolute;right:20px;top:calc(var(--safe-top) + 18px);z-index:2}
#s-today > .brand > div{display:none}
#s-today > .greet{margin-top:24px;padding-right:56px}
/* water: one calm row */
.fwrow{display:flex;align-items:center;gap:12px;margin-top:14px;padding:12px 12px 12px 14px;border-radius:22px}
.fwrow .fwi{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;background:rgba(120,190,255,.12);color:#8CCBFF;flex:none}
.fwrow .fwi svg{width:20px;height:20px}
.fwrow .l{flex:1;min-width:0;display:grid;gap:5px}
.fwrow strong{font-size:14.5px;font-weight:800}
.fwrow strong small{font-weight:700;color:var(--muted);margin-left:6px;font-size:12.5px}
.fwbar{display:block;height:6px;border-radius:9px;background:rgba(255,255,255,.07);overflow:hidden}
.fwbar i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,#6FB7FF,#8CE0FF);transform-origin:0 50%;transition:transform .6s var(--ease)}
.fwrow .step{width:40px;height:40px;flex:none}
.fwrow .step.plus{background:rgba(120,190,255,.16);color:#BFE3FF}

/* ---------- 1.23.1: motion polish ---------- */
/* tab switches: the old screen steps away fast and the new one arrives just after, so the two never
   show at once; a small slide in the direction you went */
.screen{transform:translateX(calc(var(--off-x, 0px) * .5)) scale(.992);transition:opacity .13s ease-out,transform .3s var(--ease),visibility 0s .13s}
.screen.on{transform:none;transition:opacity .3s cubic-bezier(.2,.8,.2,1) .08s,transform .48s cubic-bezier(.2,.9,.25,1) .05s,visibility 0s 0s}
.screen.enter > *{animation-duration:.42s}
/* the message box only fades in (no slide), so the orb lands exactly where it will sit */
.composer{transform:none}
/* the tab lens: quicker, still springy */
.dock .ind{transition:transform .44s cubic-bezier(.3,1.2,.45,1),width .44s cubic-bezier(.3,1.2,.45,1),opacity .3s}
.dock .ind.moving{animation:liquid2 .44s cubic-bezier(.3,1.1,.45,1)}


/* ======================= 1.32: back to the 1.23 design, with what came after =======================
   Only additions here: the newer features in the older look. */
/* foods said together: one line with the meal's total, each food its own row */
.fgroup{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:10px 14px 4px;font-size:12px;font-weight:800;color:var(--muted);letter-spacing:.01em}
.fgroup b{color:var(--ink);font-weight:800}
.frow.ingroup .fmain{padding-left:22px;position:relative}
.frow.ingroup .fmain::before{content:"";position:absolute;left:12px;top:6px;bottom:6px;width:2px;border-radius:2px;background:rgba(var(--a-rgb),.35)}
.frow.ingroup + .frow.ingroup{border-top-color:transparent}
.fgroup + .frow{border-top:0}
/* sheets: swipe down from anywhere; a flick leaves at the finger's speed, a let-go springs back */
.sheet.show.snap{transition:transform .42s cubic-bezier(.32,1.2,.5,1)}
.sheet.flung{transition:transform .26s cubic-bezier(.2,.8,.2,1)!important}
.sheet .sbody{overscroll-behavior-y:none}
/* the one known lag source of this design: a live blur behind every chat bubble */
.msg.ai .bub{-webkit-backdrop-filter:none;backdrop-filter:none}

/* ======================= 1.33: the orb is the Coach (in the 1.23 design) =======================
   Tapping the orb, its light blooms out and becomes the Coach's background; the conversation rises
   into it and the bar steps aside. Closing, the light gathers back into the orb. The light is two
   screen-sized layers (.bloom grows out of the orb and fades, .veil is the Coach's background), so
   the phone never draws anything bigger than the screen. Only opacity and scale ever move. */
.app.coaching .dock{opacity:0;transform:translateY(30px) scale(.94);pointer-events:none}
.app.coaching .dock .orbbtn{transform:none;opacity:1}
.app.uncoaching .dock{transition:opacity .3s cubic-bezier(.2,.8,.2,1),transform .4s cubic-bezier(.2,.8,.2,1)}
.app.coaching:not(.is-sub):not(.voice) .composer{bottom:calc(var(--dock-bottom) + 6px)}
.app.coaching.inputting:not(.is-sub):not(.voice) .composer,.app.coaching.kb:not(.is-sub):not(.voice) .composer{transform:none}
.app.coaching .screen#s-coach{padding-bottom:calc(var(--dock-bottom) + 90px)}
.app.coaching.has-mini #s-coach{padding-bottom:calc(var(--dock-bottom) + 90px)}
.app.coaching.has-mini:not(.inputting):not(.kb) .composer{bottom:calc(var(--dock-bottom) + 6px)}
.app.kb #s-coach,.app.coaching.inputting .screen#s-coach,.app.coaching.kb .screen#s-coach{padding-bottom:84px}
.app.coaching .intent,.app.coaching .toast{bottom:calc(var(--dock-bottom) + 76px)}
.app.coaching.has-mini .minibar{opacity:0;pointer-events:none}
#s-coach{z-index:3}
#s-coach > .cclose{margin-top:10px}
.dock .orbbtn.pressing{transform:scale(.9)}

.aura{--ax:50%;--ay:calc(100% - var(--dock-bottom) - 40px);position:absolute;inset:0;z-index:2;pointer-events:none;overflow:hidden;visibility:hidden}
.app.coaching .aura,.aura.run{visibility:visible}
.aura .veil{position:absolute;inset:0;opacity:0;
  background:radial-gradient(130% 62% at var(--ax) var(--ay),color-mix(in srgb,var(--accent) 16%,var(--bg)) 0%,color-mix(in srgb,var(--violet) 12%,var(--bg)) 20%,color-mix(in srgb,var(--blue) 5%,var(--bg)) 42%,var(--bg) 70%)}
.app.coaching .aura .veil{opacity:1}
.aura .bloom{position:absolute;inset:0;opacity:0;scale:1;transform-origin:var(--ax) var(--ay);will-change:scale,opacity;
  background:radial-gradient(circle at var(--ax) var(--ay),color-mix(in srgb,var(--accent-hi) 70%,transparent) 0,color-mix(in srgb,var(--accent) 45%,transparent) 9%,color-mix(in srgb,var(--violet) 22%,transparent) 26%,transparent 52%)}
/* the conversation arrives with the light */
.app.coach-in #s-coach > *{animation:coachin .5s cubic-bezier(.2,.75,.2,1) both;animation-delay:.16s}
.app.coach-in #s-coach > *:nth-child(2){animation-delay:.2s}
.app.coach-in #s-coach > *:nth-child(n+3){animation-delay:.24s}
@keyframes coachin{from{opacity:0;transform:translateY(14px) scale(.985)}}
.app.coaching:not(.is-sub):not(.voice) .composer{transition:opacity .45s cubic-bezier(.2,.8,.2,1) .2s,transform .55s cubic-bezier(.2,.8,.2,1) .2s,box-shadow .4s}
.composer{transition:opacity .16s cubic-bezier(.4,0,1,1),transform .3s cubic-bezier(.2,.8,.2,1),box-shadow .4s}
.app.coach-in .composer .corb .orb{animation:orbin .7s cubic-bezier(.3,1.25,.5,1) .32s both}
@keyframes orbin{from{transform:scale(.3);opacity:0}}
/* the message box stays where it is while it fades out (it used to jump up to its place above the bar) */
.app.uncoaching .composer{bottom:calc(var(--dock-bottom) + 6px)}

/* thinking: one soft light. A slow aurora rises behind the conversation and the message-box orb
   breathes in it; the separate thinking bubble is kept for screen readers only */
.aura .glow{position:absolute;left:50%;bottom:-56vw;width:130vw;max-width:780px;aspect-ratio:1;translate:-50% 0;border-radius:50%;opacity:0;scale:.8;
  background:conic-gradient(from 0deg,var(--accent),var(--violet),var(--blue),color-mix(in srgb,var(--warm) 60%,var(--violet)),var(--accent));
  -webkit-mask:radial-gradient(closest-side,#000 0%,rgba(0,0,0,.55) 38%,transparent 72%);mask:radial-gradient(closest-side,#000 0%,rgba(0,0,0,.55) 38%,transparent 72%);
  transition:opacity .9s cubic-bezier(.2,.8,.2,1),scale 1.4s cubic-bezier(.2,.8,.2,1);animation:auraspin 14s linear infinite paused;will-change:rotate}
.app.thinking .aura .glow{opacity:.7;scale:1;animation-play-state:running}
@keyframes auraspin{to{rotate:360deg}}
.msg.ai.is-thinking{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.orb{isolation:isolate}
.orb::before{content:"";position:absolute;inset:-45%;z-index:-1;border-radius:50%;pointer-events:none;opacity:0;transition:opacity .4s;background:radial-gradient(closest-side,rgba(var(--a-rgb),.55),rgba(var(--v-rgb),.25) 55%,transparent)}
.app.thinking .composer .corb .orb::before{opacity:1;animation:orbhalo 2.6s ease-in-out infinite}
.app.thinking .composer .corb .orb .core{animation:orbwork 2.6s ease-in-out infinite}
@keyframes orbhalo{0%,100%{opacity:.45;scale:.85}50%{opacity:1;scale:1.08}}
@keyframes orbwork{0%,100%{scale:1}50%{scale:1.07}}

/* You */
#s-you .yhero{width:100%;margin-top:14px;padding:16px;border-radius:28px;display:flex;align-items:center;gap:14px;text-align:left}
#s-you .yav{width:54px;height:54px;flex:none;border-radius:50%;display:grid;place-items:center;font-size:22px;font-weight:800;color:var(--accent-ink);
  background:radial-gradient(circle at 35% 30%,var(--accent-hi),var(--accent) 55%,var(--violet));box-shadow:0 8px 22px -8px rgba(var(--v-rgb),.7)}
#s-you :is(.yhero,.ytile) .l{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
#s-you :is(.yhero,.ytile) strong{font-size:17px;font-weight:800;letter-spacing:-.01em}
#s-you :is(.yhero,.ytile) small{font-size:13px;font-weight:600;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#s-you :is(.yhero,.ytile) > svg{width:18px;height:18px;flex:none;color:var(--dim);stroke-width:2.4}
#s-you .ylist{display:flex;flex-direction:column;gap:10px;margin-top:14px}
#s-you .ytile{width:100%;display:flex;align-items:center;gap:14px;padding:14px 16px;border-radius:22px;text-align:left}
#s-you .ytile .tic{width:40px;height:40px;flex:none;border-radius:14px;display:grid;place-items:center;background:rgba(var(--a-rgb),.1);color:var(--accent)}
#s-you .ytile .tic svg{width:21px;height:21px}

/* Chrome's own back-swipe animation (from the left edge) is running: nothing of ours on top */
.app.uanav .screen,.app.uanav .screen.on{transition:none!important}
.app.uanav .screen.enter > *{animation:none!important}

/* ---------- 1.33: iOS-style sheets ----------
   A sheet lifts the page off the background: it shrinks back a little with rounded corners and
   dims, and while you swipe the sheet down the page follows your finger back to full size.
   The iOS sheet curve; the page and the sheet move together. */
.sheet{transition:transform .34s cubic-bezier(.4,0,.9,.6)}
.sheet.show{transition:transform .52s cubic-bezier(.32,.72,0,1)}
.sheet.dragging{transition:none}
.scrim{transition:opacity .45s cubic-bezier(.32,.72,0,1)}
/* the page's depth itself is animated in sheet.js (scale and position only) */

/* ======================= 1.35: the workout, polished =======================
   Every moment is timed from when it happened (--t is a negative delay), so a redraw continues it
   instead of restarting it. Only transform and opacity move. */
:root{--spring:cubic-bezier(.34,1.45,.55,1);--glide:cubic-bezier(.2,.8,.2,1)}

/* a logged set lands: it drops into place with a little spring, a ring of light fades off it and
   the check draws itself */
.set.fresh{animation:setland .62s var(--spring) both;animation-delay:var(--t,0ms)}
@keyframes setland{0%{opacity:0;transform:translateY(-10px) scale(.94)}100%{opacity:1;transform:none}}
.set.fresh::after{content:"";position:absolute;inset:-1px;border-radius:inherit;pointer-events:none;border:1.5px solid rgba(var(--a-rgb),.7);background:rgba(var(--a-rgb),.14);
  animation:setglow 1.6s var(--glide) both;animation-delay:var(--t,0ms)}
@keyframes setglow{0%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(1.035)}}
.set.fresh .ck{animation:ckpop .5s var(--spring) both;animation-delay:calc(var(--t,0ms) + .12s)}
@keyframes ckpop{0%{opacity:0;transform:scale(.3)}100%{opacity:1;transform:none}}
.set.fresh .ck svg path{stroke-dasharray:22;stroke-dashoffset:22;animation:ckdraw .38s ease-out forwards;animation-delay:calc(var(--t,0ms) + .24s)}
@keyframes ckdraw{to{stroke-dashoffset:0}}
.set.fresh .val b{display:inline-block;animation:valin .5s var(--glide) both;animation-delay:calc(var(--t,0ms) + .06s)}
@keyframes valin{from{opacity:0;transform:translateY(5px)}}
/* a record: warm light instead, the tag springs in and "New record" floats up off the row */
.set.prfresh::after{border-color:rgba(255,217,168,.8);background:rgba(255,217,168,.16);animation-duration:2.2s}
.set.prfresh .tag{animation:ckpop .55s var(--spring) both;animation-delay:calc(var(--t,0ms) + .3s)}
.set.prflash{animation:none}
.sw{position:relative}
.prfloat{position:absolute;right:88px;top:50%;margin-top:-11px;z-index:3;pointer-events:none;padding:3px 9px;border-radius:999px;font-size:11.5px;font-weight:800;letter-spacing:.02em;
  color:#2B1E0A;background:linear-gradient(180deg,#FFE7C2,#FFC98A);box-shadow:0 6px 18px -6px rgba(255,190,110,.8);
  opacity:0;animation:prfloat 1.9s var(--glide) both;animation-delay:calc(var(--t,0ms) + .25s)}
@keyframes prfloat{0%{opacity:0;transform:translateX(12px) scale(.7)}16%{opacity:1;transform:none}78%{opacity:1;transform:none}100%{opacity:0;transform:translateX(-6px) scale(.96)}}
/* the log button gives a short, firm press and its set number ticks over */
.log.flash{animation:logpress .42s var(--spring)}
@keyframes logpress{0%{transform:scale(.95)}100%{transform:none}}
.log.flash > span{display:inline-block;animation:tickUp .4s var(--glide)}

/* rest: the card drops in with a spring; the ring drains smoothly (driven from JS) */
.rest.in{animation:restin2 .55s var(--spring) both}
@keyframes restin2{from{opacity:0;transform:translateY(-12px) scale(.96)}}
.ring .fg{transition:none}
.ring::after{content:"";position:absolute;inset:-8px;border-radius:50%;pointer-events:none;opacity:0;background:radial-gradient(closest-side,rgba(var(--a-rgb),.5),transparent)}
/* the last three seconds: a soft glow breathes behind the ring (no filters) */
.ring.hot{animation:hotbeat 1s ease-in-out infinite}
.ring.hot::after{animation:hotglow 1s ease-in-out infinite}
@keyframes hotbeat{50%{transform:scale(1.06)}}
@keyframes hotglow{50%{opacity:1}}
/* rest over: the ring fills back up in one sweep, a check pops in and the card glows once */
.ring.bloom .fg{animation:ringfill .7s var(--glide) both;animation-delay:var(--t,0ms)}
@keyframes ringfill{from{stroke-dashoffset:157.08}to{stroke-dashoffset:0}}
.ring.bloom b svg{width:22px;height:22px;stroke-width:2.6;color:var(--accent);animation:ckpop .5s var(--spring) both;animation-delay:calc(var(--t,0ms) + .35s)}
.ring.bloom b svg path{stroke-dasharray:22;stroke-dashoffset:22;animation:ckdraw .35s ease-out forwards;animation-delay:calc(var(--t,0ms) + .45s)}
.ring.bloom::after{animation:hotglow 1.2s ease-out both;animation-delay:var(--t,0ms)}
.rest.over{position:relative;isolation:isolate}
.rest.over::before{content:"";position:absolute;inset:0;border-radius:inherit;z-index:-1;pointer-events:none;box-shadow:0 0 0 1.5px rgba(var(--a-rgb),.55),0 14px 40px -12px rgba(var(--a-rgb),.55);opacity:0;animation:overglow 2.4s ease-out both;animation-delay:var(--t,0ms)}
@keyframes overglow{15%{opacity:1}100%{opacity:.35}}

/* just finished: a ring draws around, a check draws inside it, "Workout complete" rises, then the
   title, the numbers, the highlights and every record arrive one after another */
.donehero{display:flex;flex-direction:column;align-items:center;gap:10px;margin:6px 0 2px}
.dring{width:96px;height:96px;overflow:visible;filter:drop-shadow(0 10px 24px rgba(var(--v-rgb),.45))}
.dring circle{fill:none;stroke-width:5}
.dring .bg{stroke:rgba(255,255,255,.07);fill:rgba(var(--a-rgb),.06)}
.dring .fg{stroke:var(--accent);stroke-linecap:round;stroke-dasharray:264;stroke-dashoffset:264;transform:rotate(-90deg);transform-origin:48px 48px;
  animation:dringdraw .7s cubic-bezier(.5,0,.2,1) forwards;animation-delay:calc(var(--t,0ms) + .12s)}
@keyframes dringdraw{to{stroke-dashoffset:0}}
.dring .ck{fill:none;stroke:var(--accent-hi);stroke-width:6;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:56;stroke-dashoffset:56;
  animation:ckdraw .34s ease-out forwards;animation-delay:calc(var(--t,0ms) + .66s)}
.donehero{animation:heropop .8s var(--spring) both;animation-delay:var(--t,0ms)}
@keyframes heropop{0%{opacity:0;transform:scale(.7)}60%{opacity:1}100%{transform:none}}
.dlabel{font-size:13px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--accent);animation:valin .5s var(--glide) both;animation-delay:calc(var(--t,0ms) + .8s)}
#s-detail.finished > *{animation:finrise .6s var(--glide) both;animation-delay:calc(var(--t,0ms) + var(--d,.9s))}
#s-detail.finished > .top{animation:none}
#s-detail.finished > .donehero{animation:heropop .8s var(--spring) both;animation-delay:var(--t,0ms)}
#s-detail.finished > .h1{--d:.86s}
#s-detail.finished > .detail-date{--d:.92s}
#s-detail.finished > .summary{--d:1s}
#s-detail.finished > :nth-child(n+6){--d:1.12s}
#s-detail.finished > :nth-child(n+7){--d:1.22s}
#s-detail.finished > :nth-child(n+8){--d:1.3s}
@keyframes finrise{from{opacity:0;transform:translateY(16px)}}
#s-detail.finished .prs li{animation:ckpop .55s var(--spring) both;animation-delay:calc(var(--t,0ms) + 1.25s + var(--i,0) * .14s)}

/* your own program (Add a program sheet) and "Save as a routine" */
.ownprog{display:flex;flex-direction:column;gap:6px;padding:14px;border-radius:22px;margin-top:10px}
.ownprog strong{font-size:16px;font-weight:800}
.ownprog small{font-size:13px;color:var(--muted);font-weight:600;line-height:1.35}
.ownprog textarea{margin-top:6px;width:100%;min-height:112px;resize:vertical;border-radius:16px;padding:12px 14px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);color:var(--ink);font:600 14.5px/1.45 var(--font);outline:none}
.ownprog textarea:focus{border-color:rgba(var(--a-rgb),.55)}
.ownprog .log{margin-top:6px}
.plabel{margin:16px 2px 4px;font-size:12px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--dim)}
.btn2.saveas{width:100%;margin-top:10px}

/* ======================= 1.36: no dark moment between screens =======================
   Measured frame by frame: every tab or page change dipped ~10–15 % darker for a moment (the old
   screen faded out while the new one's cards were still invisible). Now the new screen is there at
   once and its cards glide the last few pixels in from mostly visible. */
.screen{transition:opacity .1s ease-out,transform .3s cubic-bezier(.16,1,.3,1),visibility 0s .1s}
.screen.on{transition:opacity .12s ease-out,transform .42s cubic-bezier(.2,.9,.25,1),visibility 0s 0s}
.screen.enter > *{animation:enterglide .46s cubic-bezier(.2,.8,.2,1) both}
@keyframes enterglide{from{opacity:.7;transform:translateY(8px)}}

/* ======================= 1.37: the Coach opens and thinks beautifully ======================= */
/* opening: a thin ring of light ripples out of the orb with the bloom */
.aura .wave{position:absolute;left:var(--ax);top:var(--ay);width:120px;height:120px;border-radius:50%;opacity:0;transform:translate(-50%,-50%);will-change:transform,opacity;
  box-shadow:0 0 0 1.5px rgba(var(--a-rgb),.75),0 0 24px 4px rgba(var(--v-rgb),.45),inset 0 0 18px 2px rgba(var(--a-rgb),.35)}
/* the conversation arrives: header first, then the last messages one after another, each from a little lower */
.app.coach-in #s-coach .msg{animation:coachmsg .55s cubic-bezier(.2,.8,.2,1) both}
.app.coach-in #s-coach .msg:nth-last-child(1){animation-delay:.34s}
.app.coach-in #s-coach .msg:nth-last-child(2){animation-delay:.29s}
.app.coach-in #s-coach .msg:nth-last-child(3){animation-delay:.24s}
.app.coach-in #s-coach .msg:nth-last-child(n+4){animation-delay:.2s}
@keyframes coachmsg{from{opacity:0;transform:translateY(18px) scale(.98)}}
/* the message-box orb lands with a soft pulse of light */
.app.coach-in .composer .corb .orb::before{opacity:1;animation:orbland 1.1s ease-out .45s both}
@keyframes orbland{0%{opacity:0;scale:.6}35%{opacity:1;scale:1.25}100%{opacity:0;scale:1.5}}

/* thinking: gradient clouds of the theme colour drift and breathe behind the conversation (soft
   radial gradients, moved on the GPU: no live blur), the aurora turns slowly under them */
.aura .clouds{position:absolute;left:0;right:0;bottom:0;height:70%;pointer-events:none;opacity:0;transition:opacity .9s cubic-bezier(.2,.8,.2,1)}
.aura .clouds i{position:absolute;width:90vw;max-width:520px;aspect-ratio:1;border-radius:50%;will-change:transform;animation-play-state:paused}
.aura .clouds i:nth-child(1){left:-18%;bottom:-18%;background:radial-gradient(closest-side,rgba(var(--v-rgb),.55),rgba(var(--v-rgb),0));animation:cloud1 7s ease-in-out infinite alternate}
.aura .clouds i:nth-child(2){right:-22%;bottom:-8%;background:radial-gradient(closest-side,rgba(var(--b-rgb),.45),rgba(var(--b-rgb),0));animation:cloud2 9s ease-in-out infinite alternate}
.aura .clouds i:nth-child(3){left:18%;bottom:-30%;background:radial-gradient(closest-side,rgba(var(--a-rgb),.42),rgba(var(--a-rgb),0));animation:cloud3 6s ease-in-out infinite alternate}
@keyframes cloud1{to{transform:translate(22vw,-10vh) scale(1.15)}}
@keyframes cloud2{to{transform:translate(-26vw,-14vh) scale(.9)}}
@keyframes cloud3{0%{transform:translateY(0) scale(.9)}100%{transform:translateY(-18vh) scale(1.2)}}
.app.thinking .aura .clouds{opacity:1}
.app.thinking .aura .clouds i{animation-play-state:running}
.app.thinking .aura .glow{opacity:.45}
/* and one quiet line in the conversation: what it's doing, in a shimmer of the theme colour
   (no bubble, no second orb) */
.msg.ai.is-thinking{position:static;width:auto;height:auto;overflow:visible;clip-path:none}
.msg.ai.is-thinking .bub{background:none!important;border:0!important;box-shadow:none!important;padding:4px 2px!important}
.msg.ai.is-thinking .bub::before,.msg.ai.is-thinking .bub::after,.msg.ai.is-thinking .think .orb{display:none}
.msg.ai.is-thinking .think .tl{font-size:15.5px;font-weight:700;background:linear-gradient(90deg,var(--muted) 0%,var(--accent-hi) 40%,var(--violet) 55%,var(--muted) 90%);background-size:250% 100%;-webkit-background-clip:text;background-clip:text;color:transparent}
.msg.ai.is-thinking{animation:thinkin .5s cubic-bezier(.2,.8,.2,1) both}
@keyframes thinkin{from{opacity:0;transform:translateY(8px)}}

/* what the Coach changed in the plan, under its reply */
.chgnote{display:flex;align-items:center;gap:10px;margin-top:10px;padding:10px 10px 10px 12px;border-radius:18px;background:rgba(var(--a-rgb),.08);border:1px solid rgba(var(--a-rgb),.22);animation:thinkin .5s cubic-bezier(.2,.8,.2,1) both}
.chgnote .chgic{width:24px;height:24px;flex:none;border-radius:50%;display:grid;place-items:center;background:var(--accent);color:var(--accent-ink)}
.chgnote .chgic svg{width:14px;height:14px;stroke-width:2.8}
.chgnote .chgtxt{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;font-size:14px;line-height:1.3}
.chgnote .chgtxt b{font-weight:800}
.chgnote .chip{flex:none}
.chgnote .chgu{font-size:12.5px;font-weight:800;color:var(--muted)}
.chgnote.undone{opacity:.6}
.chgnote.undone .chgtxt b{text-decoration:line-through}
/* the week strip: a day changed by the Coach (wrestling, a moved session) */
.wpday.other .wr{color:var(--warm)}
.wpday.changed{border-color:rgba(var(--a-rgb),.35)}

/* found with the motion lab: the pulsing dot on the record card scaled an SVG circle, which re-laid out
   the page every frame, and animations kept running on screens you can't see */
@keyframes prpulse{50%{opacity:.04}}
.screen:not(.on) *{animation-play-state:paused!important}

/* ======================= 1.40: thinking lives in the message box =======================
   While the Coach thinks, the box itself comes alive: a soft gradient of the theme colours drifts
   through it, a ring of light breathes round it and the steps ("Reading your log…") shimmer where
   you type. The screen stays calm (no clouds filling the empty space); only the Coach's background
   light drifts slowly. */
.composer{isolation:isolate}
.composer > :not(.cglow){position:relative;z-index:1}
.cglow{position:absolute!important;inset:0;border-radius:inherit;overflow:hidden;pointer-events:none;z-index:0;opacity:0;transition:opacity var(--m-slow) var(--e-out)}
.cglow i{position:absolute;top:-60%;left:-100%;width:300%;height:220%;will-change:transform;
  background:linear-gradient(100deg,transparent 16%,rgba(var(--v-rgb),.5) 30%,rgba(var(--a-rgb),.38) 44%,rgba(var(--b-rgb),.45) 56%,rgba(var(--v-rgb),.3) 68%,transparent 82%);
  animation:cdrift var(--m-think) var(--e-soft) infinite alternate;animation-play-state:paused}
@keyframes cdrift{from{transform:translateX(-22%) rotate(-4deg)}to{transform:translateX(22%) rotate(4deg)}}
.composer::before{content:"";position:absolute;inset:-1px;border-radius:inherit;pointer-events:none;z-index:2;opacity:0;
  box-shadow:0 0 0 1.5px rgba(var(--a-rgb),.55),0 0 22px -2px rgba(var(--v-rgb),.6),0 12px 36px -12px rgba(var(--v-rgb),.7);transition:opacity var(--m-slow) var(--e-out)}
.cthink{position:absolute!important;left:58px;right:62px;top:0;bottom:0;display:grid;align-items:center;pointer-events:none;opacity:0;transition:opacity var(--m-base) var(--e-out)}
.cthink .tl{grid-area:1/1;opacity:0;font-size:15.5px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  background:linear-gradient(90deg,var(--muted) 0%,var(--accent-hi) 40%,var(--violet) 55%,var(--muted) 90%);background-size:250% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;
  animation:shimmer 1.8s linear infinite,stepcycle 8s ease infinite;animation-delay:0s,calc(var(--i) * 2s);animation-play-state:paused}
.app.thinking .composer .cglow,
.app.thinking .composer .cthink{opacity:1}
.app.thinking .composer .cglow i,
.app.thinking .composer .cthink .tl{animation-play-state:running}
.app.thinking .composer::before{opacity:1;animation:cring var(--m-think) var(--e-soft) infinite alternate}
@keyframes cring{from{opacity:.55}to{opacity:1}}
.app.thinking .composer input::placeholder{color:transparent}
/* the screen stays calm: no clouds, no aurora; the Coach's own light drifts slowly instead */
.aura .clouds{display:none}
.app.thinking .aura .glow{opacity:0}
.app.thinking .aura .veil{animation:veildrift var(--m-drift) var(--e-soft) infinite alternate}
@keyframes veildrift{from{transform:none}to{transform:translateY(-4%) scale(1.08)}}
/* the thinking line in the conversation is for screen readers only now (the box shows it) */
.msg.ai.is-thinking{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}

/* replies: each word surfaces out of a soft blur, lit in the accent, and settles, slower and smoother */
.bub .w{animation:wordblur var(--m-word) var(--e-soft) both}
@keyframes wordblur{
  0%{opacity:0;filter:blur(10px);color:var(--accent-hi);transform:translateY(.3em)}
  40%{opacity:.85;filter:blur(3px);color:color-mix(in srgb,var(--accent-hi) 75%,var(--ink))}
  100%{opacity:1;filter:none;color:inherit;transform:none}}

/* the orb listens: its light swells with your voice, its colours swirl faster and a ring ripples out */
.composer:is([data-talk=listening],[data-talk=hearing]) .corb .orb::before{opacity:calc(.35 + var(--lv, 0) * 1.3);transform:scale(calc(.9 + var(--lv, 0) * 1.2));transition:transform .09s linear,opacity .09s linear;animation:none}
.composer:is([data-talk=listening],[data-talk=hearing]) .corb .orb .core b:nth-child(1){animation-duration:3s}
.composer:is([data-talk=listening],[data-talk=hearing]) .corb .orb .core b:nth-child(2){animation-duration:3.6s}
.composer:is([data-talk=listening],[data-talk=hearing]) .corb .orb .core b:nth-child(3){animation-duration:2.2s}
.corb{position:relative}
.corb::after{content:"";position:absolute;inset:4px;border-radius:50%;pointer-events:none;opacity:0;box-shadow:0 0 0 1.5px rgba(var(--a-rgb),.7)}
.composer:is([data-talk=listening],[data-talk=hearing]) .corb::after{animation:corbring 1.6s var(--e-out) infinite}
@keyframes corbring{0%{opacity:.8;transform:scale(.9)}100%{opacity:0;transform:scale(1.9)}}
/* …and the big orb (hold to talk, anywhere): the same living light around it */
.ofloat .orb.lift::before{opacity:calc(.25 + var(--l, 0) * 1.4);transform:scale(calc(.85 + var(--l, 0) * .9));transition:transform .09s linear,opacity .09s linear;animation:none}
.ofloat[data-phase=listening] .orb.lift .core b:nth-child(1){animation-duration:3s}
.ofloat[data-phase=listening] .orb.lift .core b:nth-child(2){animation-duration:3.6s}
.ofloat[data-phase=listening] .orb.lift .core b:nth-child(3){animation-duration:2.2s}

@media (prefers-reduced-motion: reduce){
  .cglow i,.cthink .tl,.aura .veil,.corb::after,.composer::before{animation:none!important}
  .cthink .tl:first-child{opacity:1}
  .bub .w{animation:none}
}

/* ======================= 1.41 ======================= */
/* the status bar: the app's own colour at the very top, then a soft progressive blur, like the bar at
   the bottom (no dark band when content scrolls under it) */
.edge.et{height:calc(var(--safe-top) + 64px)}
.edge.et::before{background:linear-gradient(var(--edge) 0,color-mix(in srgb,var(--edge) 55%,transparent) calc(var(--safe-top) * .6),color-mix(in srgb,var(--edge) 16%,transparent) calc(var(--safe-top) + 22px),transparent)}
.edge.et::after{-webkit-backdrop-filter:blur(14px) saturate(160%);backdrop-filter:blur(14px) saturate(160%);
  -webkit-mask-image:linear-gradient(#000 0,#000 calc(var(--safe-top) * .6),rgba(0,0,0,.55) calc(var(--safe-top) + 22px),transparent);
  mask-image:linear-gradient(#000 0,#000 calc(var(--safe-top) * .6),rgba(0,0,0,.55) calc(var(--safe-top) + 22px),transparent)}

/* thinking in the message box: no words, just the light. Two soft gradients of the theme colours
   drift through the box against each other while its ring breathes */
.cthink{display:none!important}
.cglow::after{content:"";position:absolute;inset:-40% -30%;will-change:transform;opacity:.9;
  background:radial-gradient(40% 70% at 30% 50%,rgba(var(--b-rgb),.42),transparent 70%),radial-gradient(35% 80% at 72% 55%,rgba(var(--a-rgb),.36),transparent 70%);
  animation:cdrift2 calc(var(--m-think) * 1.3) var(--e-soft) infinite alternate;animation-play-state:paused}
@keyframes cdrift2{from{transform:translateX(18%) scale(1.1)}to{transform:translateX(-18%) scale(.95)}}
.app.thinking .composer .cglow::after{animation-play-state:running}

/* the box's dark drop shadow would read as a band across the moving light: the breathing ring stands
   in for it while thinking (switched, not animated) */
.app.thinking .composer{box-shadow:inset 0 1px 0 rgba(255,255,255,.1);transition-property:opacity,transform}

/* the Coach's background light fades out evenly from the orb (its violet step used to leave a darker
   ring just above the message box) */
.aura .veil{background:radial-gradient(130% 62% at var(--ax) var(--ay),color-mix(in srgb,var(--accent) 15%,var(--bg)) 0%,color-mix(in srgb,var(--accent) 7%,color-mix(in srgb,var(--violet) 9%,var(--bg))) 22%,color-mix(in srgb,var(--violet) 6%,var(--bg)) 40%,color-mix(in srgb,var(--blue) 2.5%,var(--bg)) 56%,var(--bg) 72%)}

/* …and the background moves: soft clouds of the theme colours drift behind the conversation (radial
   gradients moved on the GPU, no live blur), fading in only while the Coach thinks */
.aura .clouds{display:block;height:75%}
.app.thinking .aura .clouds{opacity:.7}
.aura .clouds i:nth-child(1){animation-duration:var(--m-drift)}
.aura .clouds i:nth-child(2){animation-duration:calc(var(--m-drift) * 1.3)}
.aura .clouds i:nth-child(3){animation-duration:calc(var(--m-drift) * .85)}

@media (prefers-reduced-motion: reduce){
  .cglow::after,.aura .clouds i{animation:none!important}
}
html[data-motion=off] .cglow::after,html[data-motion=off] .aura .clouds i{animation:none!important}

/* ======================= 1.42: smooth, and a thinking light worth watching =======================
   Found on the phone recording: the blurred screen edges were re-blurred every frame while the light
   moved under them, the whole background drifted under three blurs while thinking, and the box's
   gradients turned into a grey smear in the mono theme. Now the moving parts are few and cheap. */

/* while the Coach opens or closes, the blurred edges step aside (the light is moving under them) */
.app.morphing .edge{visibility:hidden}


/* thinking: the soft gradients drift inside the box (no lines round it); the box is filled rather than
   live-blurred while the light moves, and the bottom blur steps aside */
.cglow{opacity:0}
.app.thinking .composer::before{opacity:0;animation:none}
.app.thinking .composer{-webkit-backdrop-filter:none;backdrop-filter:none;--gl-fill:color-mix(in srgb,var(--bg) 88%,transparent)}
.app.thinking .composer .cglow{opacity:.8}
.app.thinking .aura .veil{animation:none}
.app.coaching.thinking .edge.eb{visibility:hidden}
.app.thinking .aura .clouds{opacity:.55}

/* words: a lighter blur is just as soft and far cheaper to paint on a phone */
@keyframes wordblur{
  0%{opacity:0;filter:blur(6px);color:var(--accent-hi);transform:translateY(.25em)}
  45%{opacity:.9;filter:blur(1.5px);color:color-mix(in srgb,var(--accent-hi) 70%,var(--ink))}
  100%{opacity:1;filter:none;color:inherit;transform:none}}

/* ======================= 1.43: the orb travels, the light follows the voice ======================= */
/* the orb's stand-in on its way between the bar and the message box */
.orbghost{position:absolute;z-index:8;margin:0;pointer-events:none;will-change:translate,scale}
.orbghost > .orb{will-change:opacity}
.app.orbtravel .corb .orb{opacity:0!important;animation:none!important}
/* when the orb flies in, the box comes up to meet it and the orb lands with its pulse of light
   (no separate scale-in) */
.app.coaching.orbflown:not(.is-sub):not(.voice) .composer{transition-delay:.06s,.06s,0s}
.app.coach-in.orbflown .composer .corb .orb{animation:none}
.app.coach-in.orbflown .composer .corb .orb::before{animation-delay:.52s}

/* pressing the orb: it gives quickly under your finger, its light gathers, and it springs back */
.dock .orbbtn.pressing{transform:scale(.88);transition:transform var(--m-press) var(--e-out)}
.dock .orbbtn.pressing .orb::before{opacity:.75;transition:opacity var(--m-fast) var(--e-out)}


/* the Coach speaking: only the orb moves, its light swelling with the voice */
.app.coaching .composer.speaking .corb .orb::before{opacity:calc(.25 + var(--sv, 0) * .9);transform:scale(calc(.9 + var(--sv, 0) * .5));transition:none;animation:none}

@media (prefers-reduced-motion: reduce){
  .orbghost{display:none}
}
html[data-motion=off] .orbghost{display:none}

/* ======================= 1.44 ======================= */
/* the orb lands in the message box: a ring of light rings out from the impact (the squash and the
   box's give are in JS, on scale and translate) */
.corb.impact::after{animation:corbring calc(var(--m-slow) * 1.5) var(--e-out)}
@media (prefers-reduced-motion: reduce){ .corb.impact::after{animation:none} }
/* a message on its way up from the message box (see sendFly): hidden for the frame before it flies */
.msg.me.sending{opacity:0}
.msg.me .bub{transform-origin:0 50%}
.sendghost{position:absolute;left:0;top:0;z-index:7;pointer-events:none;animation:none!important;margin:0;will-change:transform}
.sendghost > .bub{will-change:transform}
/* the week strip: a long single word ("Wrestling") breaks onto the second line instead of being cut off */
.wpday .wr{overflow-wrap:anywhere;-webkit-hyphens:auto;hyphens:auto}

/* ======================= 1.45 ======================= */
/* "Do it" chips: the Coach's offers under its reply. They rise in one after another, press like
   buttons, and step aside while you type or once the conversation moves on */
.dochips{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0 2px;transition:opacity var(--m-fast) var(--e-out),transform var(--m-fast) var(--e-out)}
.dochip{display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:0 15px 0 6px;border-radius:999px;font:inherit;font-size:14px;font-weight:800;color:var(--accent-ink);
  background:linear-gradient(180deg,var(--accent-hi),var(--accent));border:0;box-shadow:0 8px 22px -12px rgba(var(--v-rgb),.9),inset 0 1px 0 rgba(255,255,255,.5);
  animation:dochipin var(--m-slow) var(--e-spring) both;animation-delay:calc(var(--m-fast) + var(--i) * 70ms)}
.dochip:nth-child(2){color:var(--ink);background:rgba(var(--a-rgb),.12);box-shadow:inset 0 0 0 1px rgba(var(--a-rgb),.28)}
.dochip .dox{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:rgba(0,0,0,.14)}
.dochip:nth-child(2) .dox{background:rgba(var(--a-rgb),.16);color:var(--accent)}
.dochip .dox svg{width:15px;height:15px;stroke-width:2.8}
.dochip.going{opacity:.55;transform:scale(.97);transition:opacity var(--m-fast) var(--e-out),transform var(--m-fast) var(--e-out)}
@keyframes dochipin{from{opacity:0;transform:translateY(8px) scale(.94)}}
.msg:has(~ .msg.me) .dochips{display:none}
.app.typing .dochips{opacity:0;transform:translateY(4px);pointer-events:none}
.msg.seen .dochip{animation:none}
@media (prefers-reduced-motion: reduce){ .dochip{animation:none} }
.chgfail{margin-top:8px;font-size:13.5px;font-weight:700;color:var(--muted)}
.msg.ai:has(> .dochips){flex-direction:column;align-items:flex-start}
.dochip{white-space:nowrap}

/* the answer starts: the box's orb gives one pulse (and a ring), the first line rises out of the box */
.corb.answer .orb{animation:orbanswer calc(var(--m-slow) * 1.3) var(--e-spring)}
.corb.answer::after{animation:corbring calc(var(--m-slow) * 1.5) var(--e-out)}
@keyframes orbanswer{0%{scale:1}35%{scale:1.2}100%{scale:1}}
.msg.ai.arrive{animation:replyrise calc(var(--m-slow) * 1.2) var(--e-out) both}
@keyframes replyrise{from{opacity:0;transform:translateY(22px)}}
/* following along: the sentence being spoken stays bright, the rest rests a little dimmer */
.bub .sn{transition:opacity var(--m-base) var(--e-soft)}
.bub.reading .sn{opacity:.5}
.bub.reading .sn.now{opacity:1}
@media (prefers-reduced-motion: reduce){
  .corb.answer .orb,.corb.answer::after,.msg.ai.arrive{animation:none}
  .app.coaching .composer.speaking .corb .orb::before{transform:none}
}

/* Up next opening into the workout: the card's surface grows to the page under the workout's cards */
.growcard{position:absolute;left:0;top:0;width:100%;height:100%;z-index:1;pointer-events:none;transform-origin:0 0;will-change:transform,opacity;
  background:linear-gradient(180deg,color-mix(in srgb,var(--card) 92%,var(--accent) 8%),var(--card));border-radius:30px}
@media (prefers-reduced-motion: reduce){ .growcard{display:none} }
/* a workout finished: today's dot fills in with a pop and a ring of light, the check draws itself */
.wpday.fillnow .wdot{animation:dotfill calc(var(--m-slow) * 1.4) var(--e-spring) both;animation-delay:var(--m-fast)}
.wpday.fillnow .wdot svg path{stroke-dasharray:24;stroke-dashoffset:24;animation:ckdraw var(--m-base) var(--e-out) forwards;animation-delay:calc(var(--m-fast) + var(--m-base))}
.wpday.fillnow .wdot{position:relative}
.wpday.fillnow .wdot::after{content:"";position:absolute;inset:-1.5px;border-radius:50%;pointer-events:none;box-shadow:0 0 0 2px rgba(var(--a-rgb),.8);opacity:0;
  animation:dotring calc(var(--m-slow) * 1.6) var(--e-out);animation-delay:calc(var(--m-fast) + var(--m-base))}
@keyframes dotfill{0%{transform:scale(.3);opacity:0}60%{transform:scale(1.2);opacity:1}100%{transform:scale(1)}}
@keyframes dotring{0%{opacity:.9;transform:scale(1)}100%{opacity:0;transform:scale(2.4)}}
@media (prefers-reduced-motion: reduce){ .wpday.fillnow .wdot,.wpday.fillnow .wdot svg path,.wpday.fillnow .wdot::after{animation:none;stroke-dashoffset:0} }
/* the orb lands: the impact spreads into the box as a soft light from the orb's spot */
.composer > .chit{position:absolute;inset:0;z-index:0;border-radius:inherit;overflow:hidden;pointer-events:none}
.chit::before{content:"";position:absolute;left:-40px;top:50%;width:170px;height:170px;margin-top:-85px;border-radius:50%;opacity:0;transform:scale(.3);transform-origin:50% 50%;will-change:transform,opacity;
  background:radial-gradient(closest-side,rgba(var(--a-rgb),.55),rgba(var(--v-rgb),.22) 55%,transparent)}
.composer.hit .chit::before{animation:chit calc(var(--m-slow) * 2) var(--e-out)}
@keyframes chit{0%{opacity:0;transform:scale(.3)}18%{opacity:1}100%{opacity:0;transform:scale(3.2) translateX(30px)}}
@media (prefers-reduced-motion: reduce){ .composer.hit .chit::before{animation:none} }


/* ======================= 1.46 ======================= */
/* the landing hits harder: a double shockwave rings out of the orb and the light floods the box */
.corb.impact::after{animation:impactring calc(var(--m-slow) * 1.6) var(--e-out)}
.corb.impact::before{content:"";position:absolute;inset:4px;border-radius:50%;pointer-events:none;box-shadow:0 0 0 2px rgba(var(--a-rgb),.55),0 0 18px 2px rgba(var(--v-rgb),.5);opacity:0;animation:impactring calc(var(--m-slow) * 1.9) var(--e-out) calc(var(--m-press))}
@keyframes impactring{0%{opacity:1;transform:scale(.85)}100%{opacity:0;transform:scale(3.1)}}
.chit::before{background:radial-gradient(closest-side,rgba(var(--a-rgb),.8),rgba(var(--v-rgb),.35) 50%,transparent)}
@keyframes chit{0%{opacity:0;transform:scale(.3)}12%{opacity:1}100%{opacity:0;transform:scale(3.8) translateX(40px)}}
@media (prefers-reduced-motion: reduce){ .corb.impact::after,.corb.impact::before{animation:none} }

/* ---------- glass (Customize → Glass) ----------
   Liquid: the status bar's colour flows down into the page over a progressive blur, the bar at the
   bottom floats over a frosted fade, and the bar itself is a clearer, brighter-rimmed glass.
   Soft: the lighter 1.41 edges. Off: gradients only, no live blur. */
html[data-glass=liquid] .edge.et{height:calc(var(--safe-top) + 110px)}
html[data-glass=liquid] .edge.et::before{background:linear-gradient(var(--edge) 0,color-mix(in srgb,var(--edge) 94%,transparent) calc(var(--safe-top) + 6px),color-mix(in srgb,var(--edge) 70%,transparent) calc(var(--safe-top) + 30px),color-mix(in srgb,var(--edge) 34%,transparent) calc(var(--safe-top) + 62px),color-mix(in srgb,var(--edge) 10%,transparent) calc(var(--safe-top) + 88px),transparent)}
html[data-glass=liquid] .edge.et::after{-webkit-backdrop-filter:blur(22px) saturate(170%);backdrop-filter:blur(22px) saturate(170%);
  -webkit-mask-image:linear-gradient(#000 0,#000 calc(var(--safe-top) + 20px),rgba(0,0,0,.6) calc(var(--safe-top) + 52px),rgba(0,0,0,.2) calc(var(--safe-top) + 80px),transparent);
  mask-image:linear-gradient(#000 0,#000 calc(var(--safe-top) + 20px),rgba(0,0,0,.6) calc(var(--safe-top) + 52px),rgba(0,0,0,.2) calc(var(--safe-top) + 80px),transparent)}
html[data-glass=liquid] .edge.eb{height:calc(var(--dock-bottom) + var(--dock-h) + 70px)}
html[data-glass=liquid] .edge.eb::before{background:linear-gradient(transparent,color-mix(in srgb,var(--bg) 35%,transparent) 45%,color-mix(in srgb,var(--bg) 78%,transparent));opacity:0}
html[data-glass=liquid] .app.under-bottom .edge.eb::before{opacity:1}
html[data-glass=liquid] .edge.eb::after{-webkit-backdrop-filter:blur(18px) saturate(160%);backdrop-filter:blur(18px) saturate(160%);
  -webkit-mask-image:linear-gradient(transparent,rgba(0,0,0,.5) 35%,#000 70%);mask-image:linear-gradient(transparent,rgba(0,0,0,.5) 35%,#000 70%)}
html[data-glass=liquid] .dock.glass{--gl-fill:rgba(18,20,28,.42);-webkit-backdrop-filter:blur(26px) saturate(210%) brightness(1.1);backdrop-filter:blur(26px) saturate(210%) brightness(1.1);
  box-shadow:0 18px 40px -12px rgba(0,0,0,.7),inset 0 1px 1px rgba(255,255,255,.34),inset 0 -1px 1px rgba(255,255,255,.08),inset 0 0 0 .5px rgba(255,255,255,.14),inset 0 -12px 22px -16px rgba(var(--v-rgb),.4)}
html[data-glass=off] .edge::after{-webkit-backdrop-filter:none;backdrop-filter:none}
html[data-glass=off] .dock.glass,html[data-glass=off] .composer.glass{-webkit-backdrop-filter:none;backdrop-filter:none;--gl-fill:rgba(18,20,28,.92)}
/* the edges, calmer (1.47): the top gradient hugs the status bar instead of reaching into the page,
   and the bottom fade sits low, under the bar, rather than climbing up the screen */
html[data-glass=liquid] .edge.et{height:calc(var(--safe-top) + 58px)}
html[data-glass=liquid] .edge.et::before{background:linear-gradient(var(--edge) 0,color-mix(in srgb,var(--edge) 82%,transparent) calc(var(--safe-top) + 4px),color-mix(in srgb,var(--edge) 40%,transparent) calc(var(--safe-top) + 22px),color-mix(in srgb,var(--edge) 12%,transparent) calc(var(--safe-top) + 40px),transparent)}
html[data-glass=liquid] .edge.et::after{-webkit-backdrop-filter:blur(14px) saturate(150%);backdrop-filter:blur(14px) saturate(150%);
  -webkit-mask-image:linear-gradient(#000 0,#000 calc(var(--safe-top) + 6px),rgba(0,0,0,.45) calc(var(--safe-top) + 26px),transparent);
  mask-image:linear-gradient(#000 0,#000 calc(var(--safe-top) + 6px),rgba(0,0,0,.45) calc(var(--safe-top) + 26px),transparent)}
html[data-glass=liquid] .edge.eb{height:calc(var(--dock-bottom) + var(--dock-h) * .7)}
html[data-glass=liquid] .edge.eb::before{background:linear-gradient(transparent,color-mix(in srgb,var(--bg) 22%,transparent) 50%,color-mix(in srgb,var(--bg) 55%,transparent))}
html[data-glass=liquid] .edge.eb::after{-webkit-backdrop-filter:blur(12px) saturate(140%);backdrop-filter:blur(12px) saturate(140%);
  -webkit-mask-image:linear-gradient(transparent,rgba(0,0,0,.6) 50%,#000);mask-image:linear-gradient(transparent,rgba(0,0,0,.6) 50%,#000)}

/* ======================= 1.48 ======================= */
/* two-tone themes: the second colour runs through the primary buttons, the chips, the done dots and the swatches */
.swatches{grid-template-columns:repeat(5,1fr);row-gap:6px}
.swatch[data-accent=aurora] i{background:radial-gradient(circle at 30% 28%,#F1EDFF,transparent 45%),linear-gradient(135deg,#8C7CF6,#2FB9B0)}
.swatch[data-accent=sunset] i{background:radial-gradient(circle at 30% 28%,#FFF1E8,transparent 45%),linear-gradient(135deg,#FFB08A,#D9477F)}
.swatch[data-accent=ocean] i{background:radial-gradient(circle at 30% 28%,#EEF8FF,transparent 45%),linear-gradient(135deg,#5AA8FF,#22C79B)}
html[data-duo] .log{background:linear-gradient(115deg,var(--accent) 10%,var(--accent2) 95%)}
html[data-duo] .dochip:first-child{background:linear-gradient(115deg,var(--accent-hi),var(--accent) 45%,var(--accent2))}
html[data-duo] .wpday.done .wdot{background:linear-gradient(135deg,var(--accent),var(--accent2));border-color:transparent}
html[data-duo] .msg.me .bub{background:linear-gradient(135deg,rgba(var(--a-rgb),.2),color-mix(in srgb,var(--accent2) 16%,transparent));border-color:rgba(var(--a-rgb),.26)}

/* the status bar and the page are one colour: the gradient under it starts as exactly the status bar's
   colour (solid for a moment, so nothing bright shows at the seam) and only then fades into the page */
html[data-glass=liquid] .edge.et{height:calc(var(--safe-top) + 64px)}
html[data-glass=liquid] .edge.et::before{background:linear-gradient(var(--edge) 0,var(--edge) calc(var(--safe-top) + 8px),color-mix(in srgb,var(--edge) 86%,transparent) calc(var(--safe-top) + 20px),color-mix(in srgb,var(--edge) 52%,transparent) calc(var(--safe-top) + 36px),color-mix(in srgb,var(--edge) 18%,transparent) calc(var(--safe-top) + 52px),transparent)}
html[data-glass=liquid] .edge.et::after{-webkit-mask-image:linear-gradient(#000 0,#000 calc(var(--safe-top) + 14px),rgba(0,0,0,.4) calc(var(--safe-top) + 34px),transparent);
  mask-image:linear-gradient(#000 0,#000 calc(var(--safe-top) + 14px),rgba(0,0,0,.4) calc(var(--safe-top) + 34px),transparent)}

/* the bottom: no band across the screen, only a soft blur that feathers out around the bar itself */
html[data-glass=liquid] .edge.eb{left:4px;right:4px;bottom:calc(var(--dock-bottom) - 20px);height:calc(var(--dock-h) + 40px);transition:opacity var(--m-base) var(--e-out)}
html[data-glass=liquid] .edge.eb::before{background:radial-gradient(closest-side,color-mix(in srgb,var(--bg) 45%,transparent) 55%,transparent);opacity:1}
html[data-glass=liquid] .edge.eb::after{opacity:1;-webkit-backdrop-filter:blur(10px) saturate(140%);backdrop-filter:blur(10px) saturate(140%);
  -webkit-mask-image:radial-gradient(closest-side,#000 62%,transparent);mask-image:radial-gradient(closest-side,#000 62%,transparent)}
html[data-glass=liquid] .app.compact:not(.is-sub):not(.voice):not(.kb) .edge.eb{left:calc(50% - 100px);right:calc(50% - 100px)}
html[data-glass=liquid] .app.coaching .edge.eb{opacity:0}

/* the bar moves better: the indicator slides (no width animation) with a liquid stretch, the icon you
   pick springs up, and a press gives at once */
.dock .ind{transition:transform var(--m-slow) var(--e-spring),opacity var(--m-base)}
.dock .ind.moving{animation:indstretch var(--m-slow) var(--e-out)}
@keyframes indstretch{0%{scale:1 1}35%{scale:1.22 .9}70%{scale:.97 1.03}100%{scale:1 1}}
.tab.on svg.ti{animation:tabspring var(--m-slow) var(--e-spring)}
@keyframes tabspring{0%{transform:translateY(3px) scale(.82)}55%{transform:translateY(-3px) scale(1.12)}100%{transform:translateY(-1px) scale(1.06)}}
.tab:active svg.ti{transform:scale(.84);transition-duration:var(--m-press)}
@media (prefers-reduced-motion: reduce){ .dock .ind.moving,.tab.on svg.ti{animation:none} }

/* 1.49: the top gradient only just below the status bar, short enough not to be noticed; the bar at
   the bottom gets a little more of its own soft gradient blur */
html[data-glass=liquid] .edge.et{height:calc(var(--safe-top) + 24px)}
html[data-glass=liquid] .edge.et::before{background:linear-gradient(var(--edge) 0,var(--edge) var(--safe-top),color-mix(in srgb,var(--edge) 62%,transparent) calc(var(--safe-top) + 8px),color-mix(in srgb,var(--edge) 20%,transparent) calc(var(--safe-top) + 16px),transparent)}
html[data-glass=liquid] .edge.et::after{-webkit-mask-image:linear-gradient(#000 0,#000 var(--safe-top),transparent);mask-image:linear-gradient(#000 0,#000 var(--safe-top),transparent)}
html[data-glass=liquid] .edge.eb{left:0;right:0;bottom:calc(var(--dock-bottom) - 28px);height:calc(var(--dock-h) + 56px)}
html[data-glass=liquid] .edge.eb::before{background:radial-gradient(closest-side,color-mix(in srgb,var(--bg) 58%,transparent) 50%,transparent)}
html[data-glass=liquid] .edge.eb::after{-webkit-backdrop-filter:blur(12px) saturate(140%);backdrop-filter:blur(12px) saturate(140%);
  -webkit-mask-image:radial-gradient(closest-side,#000 58%,transparent);mask-image:radial-gradient(closest-side,#000 58%,transparent)}
html[data-glass=liquid] .app.compact:not(.is-sub):not(.voice):not(.kb) .edge.eb{left:calc(50% - 110px);right:calc(50% - 110px)}

/* 1.49: the orb jumping in. The box used to be still sliding up when the orb got there, so the orb
   landed in empty space. Now the box is already in place (a quick fade, no travel) and the orb arrives
   on it. */
.app.coaching.orbflown:not(.is-sub):not(.voice) .composer{transition:opacity var(--m-fast) var(--e-out),transform var(--m-fast) var(--e-out),box-shadow var(--m-base);transition-delay:0s}

/* ======================= 1.49 ======================= */
/* the weight trend: the smoothed line, each weigh-in a faint dot under it */
.chart .raw{fill:var(--muted);opacity:.45}
.wtrend{margin:8px 2px 12px;font-size:13px;color:var(--muted)}
.wtrend b{color:var(--ink);font-weight:800}
/* Up next: next time's targets, one line per lift */
.ntargets{display:flex;flex-direction:column;gap:5px;margin:10px 0 14px}
.ntargets .label{margin-bottom:2px}
.ntargets .nt{display:flex;justify-content:space-between;gap:12px;font-size:14px;color:var(--muted)}
.ntargets .nt span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ntargets .nt b{color:var(--ink);font-weight:800;white-space:nowrap;font-variant-numeric:tabular-nums}
.ntargets .nt i{font-style:normal;font-size:12px;color:var(--accent)}
.ntargets .nt.down i{color:var(--muted)}
.ntargets .ntmore{font-size:12.5px;color:var(--dim)}
/* the Coach's pinned note */
.cpin{display:flex;gap:12px;padding:14px;border-radius:24px;margin:12px 0 4px;animation:rise var(--m-slow) var(--e-out) both}
.cpin .cpic{width:40px;height:40px;border-radius:14px;display:grid;place-items:center;background:rgba(var(--a-rgb),.14);color:var(--accent);flex:none}
.cpin[data-kind=missed] .cpic,.cpin[data-kind=behind] .cpic{background:rgba(255,184,120,.14);color:#FFB878}
.cpin .cpic svg{width:21px;height:21px}
.cpin .l{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.cpin strong{font-size:15.5px;font-weight:800;line-height:1.25}
.cpin small{font-size:13px;color:var(--muted);line-height:1.35}
.cpin .cpacts{display:flex;align-items:center;gap:12px;margin-top:8px}
.cpin .chip svg{width:15px;height:15px}
#s-coach .cpin{margin:4px 0 12px}
@media (prefers-reduced-motion: reduce){ .cpin{animation:none} }
/* Food: your usual meals, the foods under the name */
.favchip.usual .fn{display:flex;flex-direction:column;line-height:1.15}
.favchip.usual .fn small{font-size:11.5px;font-weight:600;color:var(--muted);overflow:hidden;text-overflow:ellipsis}
/* the records wall: each lift's best, a fresh record glows */
.prwall{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.prtile{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:3px;padding:14px;border-radius:22px;text-align:left;min-width:0;overflow:hidden;animation:rise var(--m-slow) var(--e-out) both;animation-delay:calc(var(--i) * 40ms)}
.prtile .prn{font-size:12.5px;font-weight:700;color:var(--muted);max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.prtile b{font-size:22px;font-weight:850;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.prtile b small{font-size:12.5px;font-weight:700;color:var(--muted)}
.prtile .pre,.prtile .prd{font-size:12px;color:var(--dim)}
.prtile.fresh{border-color:rgba(255,200,140,.45)}
.prtile.fresh::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:radial-gradient(120% 90% at 100% 0%,rgba(255,196,130,.22),transparent 60%);animation:prglow var(--m-think) var(--e-soft) infinite alternate}
@keyframes prglow{from{opacity:.55}to{opacity:1}}
@media (prefers-reduced-motion: reduce){ .prtile{animation:none} .prtile.fresh::before{animation:none} }
/* a record mid-workout: a warm banner drops in, holds, lifts away */
.prcel{position:absolute;z-index:30;left:50%;top:calc(var(--safe-top) + 10px);display:flex;align-items:center;gap:10px;max-width:calc(100% - 32px);padding:10px 16px 10px 10px;border-radius:999px;pointer-events:none;
  background:linear-gradient(120deg,rgba(255,196,130,.28),rgba(var(--a-rgb),.2));border:1px solid rgba(255,210,160,.5);-webkit-backdrop-filter:blur(18px) saturate(160%);backdrop-filter:blur(18px) saturate(160%);
  box-shadow:0 10px 30px rgba(0,0,0,.35),0 0 24px rgba(255,190,120,.25);animation:prcel var(--m-think) var(--e-out) both}
.prcel .pci{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:#FFD9A8;color:#3a2410;flex:none}
.prcel .pci svg{width:19px;height:19px}
.prcel .l{display:flex;flex-direction:column;min-width:0}
.prcel small{font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:#FFD9A8}
.prcel strong{font-size:14.5px;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@keyframes prcel{0%{opacity:0;transform:translate(-50%,-24px) scale(.9)}12%{opacity:1;transform:translate(-50%,0) scale(1.04)}20%{transform:translate(-50%,0) scale(1)}82%{opacity:1;transform:translate(-50%,0) scale(1)}100%{opacity:0;transform:translate(-50%,-14px) scale(.96)}}
@media (prefers-reduced-motion: reduce){ .prcel{animation:prcelfade var(--m-think) linear both} @keyframes prcelfade{0%,100%{opacity:0}10%,85%{opacity:1}} .prcel{transform:translateX(-50%)} }

/* ======================= 1.50 ======================= */
/* reply words: a light fade per word, flowing in at a steady pace (the blur and colour sweep across
   whole paragraphs read as lag on the phone) */
.bub .w{display:inline-block;animation:wordfade var(--m-slow) var(--e-out) both}
@keyframes wordfade{from{opacity:0}to{opacity:1}}
/* 1.53: the words that have just arrived blur in and rise a touch; with the steady pace only the
   last few are ever moving, so the reply has a soft, blurred leading edge that settles behind it */
.bub .w{animation:wordrise var(--m-slow) var(--e-out) both}
@keyframes wordrise{0%{opacity:0;filter:blur(5px);transform:translateY(.28em)}55%{opacity:.85;filter:blur(1.2px)}100%{opacity:1;filter:blur(0);transform:none}}
@media (prefers-reduced-motion: reduce){ .bub .w{animation:none} }
html[data-motion=off] .bub .w{animation:none}
/* the navigation bar: a fuller gradient blur around it, wide and soft, darkest right behind the bar */
html[data-glass=liquid] .edge.eb{left:0;right:0;bottom:0;height:calc(var(--dock-bottom) + var(--dock-h) + 64px)}
html[data-glass=liquid] .edge.eb::before{opacity:1;background:radial-gradient(ellipse 50% 70% at 50% 70%,color-mix(in srgb,var(--bg) 86%,transparent) 0,color-mix(in srgb,var(--bg) 70%,transparent) 45%,color-mix(in srgb,var(--bg) 30%,transparent) 72%,transparent 100%)}
html[data-glass=liquid] .edge.eb::after{-webkit-backdrop-filter:blur(14px) saturate(140%);backdrop-filter:blur(14px) saturate(140%);
  -webkit-mask-image:radial-gradient(ellipse 50% 68% at 50% 70%,#000 45%,transparent 100%);mask-image:radial-gradient(ellipse 50% 68% at 50% 70%,#000 45%,transparent 100%)}
html[data-glass=liquid] .app.compact:not(.is-sub):not(.voice):not(.kb) .edge.eb{left:calc(50% - 150px);right:calc(50% - 150px)}
/* reports */
.rkinds{margin:4px 0 12px}
.rlist{list-style:none;margin:0 0 12px;padding:0;display:flex;flex-direction:column;gap:8px}
.rlist li{display:flex;align-items:center;gap:10px;padding:10px 8px 10px 12px;border-radius:16px}
.rlist .rt{flex:1;min-width:0;font-size:14px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rlist .rsent{color:var(--accent);display:grid;place-items:center}
.rlist .rsent svg{width:18px;height:18px}
/* Up next: a lighter session offered */
.upeasy{display:flex;align-items:center;gap:10px;margin-top:12px;font-size:13px;color:var(--muted);line-height:1.35}
.upeasy span{flex:1}
.upeasy .chip{flex:none}
.mbal .mtop{display:flex;justify-content:flex-end;margin:-2px 0 8px}
.mbal .mtop .chip svg{width:14px;height:14px}
/* Progress: the month as a picture */
.recapbtn{width:100%;margin:0 0 14px}
.recapimg{display:block;width:100%;border-radius:22px;margin:4px 0 14px;box-shadow:0 12px 40px rgba(0,0,0,.4)}

/* ======================= 1.51 ======================= */
/* status bar seam: the blur used to sit on top of the colour below the status bar and re-saturate it
   (a bluer band under a blue theme's bar). Blur first, the exact bar colour over it. */
.edge::after{z-index:0}
.edge::before{z-index:1}
/* thinking, in the message box: each phrase blurs in letter by letter along a soft colour gradient,
   a sheen passes over it, and it blurs away for the next */
.thinkline{position:absolute;left:58px;right:52px;top:0;bottom:0;display:flex;align-items:center;pointer-events:none;overflow:hidden;font-size:16px;font-weight:650;white-space:nowrap}
.thinkline .tp{position:absolute;left:0;display:inline-flex}
.thinkline .tc{display:inline-block;color:color-mix(in srgb,var(--accent-hi,var(--accent)) calc(100% - var(--k)),var(--accent2,var(--violet,var(--accent))) var(--k));opacity:0;filter:blur(6px);transform:translateY(.3em);
  animation:thinkin var(--m-slow) var(--e-out) forwards;animation-delay:calc(var(--i) * 22ms)}
.thinkline .tp.out .tc{animation:thinkout var(--m-base) var(--e-in) forwards;animation-delay:calc(var(--i) * 8ms)}
@keyframes thinkin{to{opacity:.95;filter:blur(0);transform:none}}
@keyframes thinkout{from{opacity:.95;filter:blur(0);transform:none}to{opacity:0;filter:blur(5px);transform:translateY(-.25em)}}
/* once in, a soft brightness wave runs along the letters (opacity only) */
.thinkline .tp:not(.out) .tc{animation:thinkin var(--m-slow) var(--e-out) forwards,thinkwave var(--m-think) var(--e-soft) infinite;animation-delay:calc(var(--i) * 22ms),calc(var(--m-slow) + var(--i) * 45ms)}
@keyframes thinkwave{0%,100%{opacity:.95}50%{opacity:.45}}
.thinkline.gone{opacity:0;transition:opacity var(--m-base) var(--e-out)}
.app.thinking .composer input::placeholder{color:transparent}
@media (prefers-reduced-motion: reduce){ .thinkline .tc{animation:none;opacity:.95;filter:none;transform:none} .thinkline .tp.out{display:none} }
html[data-motion=off] .thinkline .tc{animation:none;opacity:.95;filter:none;transform:none}
html[data-motion=off] .thinkline .tp.out{display:none}
.composer > .thinkline{z-index:2;position:absolute}

/* ======================= 1.52: drag to reorder ======================= */
.sorthint{margin:6px 2px 10px;font-size:12.5px;color:var(--dim)}
.sortrow,.reitem,.sgroup[data-sec]{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.sortrow .prow{align-items:center}
.sortrow .grip{width:30px;margin-left:-6px}
.sortrow.shifting,.reitem.shifting,.sgroup.shifting{transition:transform var(--m-fast) var(--e-out)!important}
.sortrow.lifted,.reitem.lifted,.sgroup.lifted{position:relative;z-index:5;transition:none!important}
.sortrow.lifted .prow,.sgroup.lifted .slist{box-shadow:0 24px 40px -14px rgba(0,0,0,.9),inset 0 0 0 1px rgba(var(--a-rgb),.3)}
.sgroup.lifted{opacity:.96}
.sortrow.settling,.reitem.settling,.sgroup.settling{transition:transform var(--m-fast) var(--e-out)!important}
.grip{color:var(--muted)}
.grip:active{color:var(--accent)}
/* Settings: each section's heading carries its pull tab */
.sgroup .sghead{display:flex;align-items:center;justify-content:space-between;gap:8px}
.sgroup .sgrip{width:40px;height:32px;margin:-6px -8px -6px 0;border-radius:12px;display:grid;place-items:center;touch-action:none;cursor:grab}
.sgroup .sgrip svg{width:20px;height:20px;stroke-width:3}
.screen.sorting .sgroup:not(.lifted) .slist{pointer-events:none}
@media (prefers-reduced-motion: reduce){ .sortrow.shifting,.reitem.shifting,.sgroup.shifting,.sortrow.settling,.reitem.settling,.sgroup.settling{transition:none!important} }
html[data-motion=off] .sortrow.shifting,html[data-motion=off] .reitem.shifting,html[data-motion=off] .sgroup.shifting,html[data-motion=off] .sortrow.settling,html[data-motion=off] .reitem.settling,html[data-motion=off] .sgroup.settling{transition:none!important}
@media (prefers-reduced-motion: reduce){ .bub .w{animation:none;will-change:auto} }
html[data-motion=off] .bub .w{animation:none;will-change:auto}
/* one-tap report: the flag on the voice card and under a Coach reply, and its sheet */
.cflag{flex:none;width:34px;height:34px;border-radius:12px;display:grid;place-items:center;color:var(--dim)}
.cflag svg,.mflag svg{width:17px;height:17px}
.cflag:active,.mflag:active{color:var(--accent);transform:scale(.9)}
.mflag{align-self:flex-start;margin:2px 0 0 -4px;width:32px;height:28px;border-radius:10px;display:grid;place-items:center;color:var(--dim);opacity:.6}
.msg.ai:has(> .dochips) .mflag{margin-top:6px}
.qrctx{border-radius:18px;padding:12px 14px;margin:6px 0 12px;display:flex;flex-direction:column;gap:8px}
.qrctx p{margin:0;display:flex;flex-direction:column;gap:2px;font-size:14px}
.qrctx small{font-size:11.5px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--dim)}
.qrnote{width:100%;height:46px;border-radius:14px;padding:0 14px;background:rgba(255,255,255,.05);border:1px solid var(--line);font-size:15px;color:inherit;outline:none}
.qrgrid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:4px}
.intent.flagged{grid-template-columns:36px 1fr auto auto;column-gap:6px}

/* ======================= 1.54: the orb, polished ======================= */
/* its trail while it flies: the orb stays sharp and leaves a soft comet of its own light behind it,
   brightest under the orb, fading and narrowing towards the tail (see orbStreak) */
.orbstreak{position:absolute;z-index:7;pointer-events:none;transform-origin:0 50%;opacity:0;will-change:transform,opacity;
  background:radial-gradient(farthest-side at 100% 50%,rgba(255,255,255,.6),rgba(255,255,255,0) 30%),
    radial-gradient(farthest-side at 100% 50%,rgba(var(--a-rgb),.9),rgba(var(--v-rgb),.5) 45%,rgba(var(--v-rgb),0))}
/* a voice-logged set: the spark on its way from the orb to the row */
.orbspark{position:absolute;z-index:30;width:20px;height:20px;margin:-10px 0 0 -10px;border-radius:50%;pointer-events:none;opacity:0;will-change:translate,scale,opacity;
  background:radial-gradient(circle,#fff 0,var(--accent-hi) 30%,rgba(var(--a-rgb),.55) 55%,rgba(var(--a-rgb),0) 72%)}
.orbspark.warm{background:radial-gradient(circle,#fff 0,#FFE9CC 30%,rgba(255,194,122,.6) 55%,rgba(255,194,122,0) 72%)}

/* the dock orb answers: it settles when it flies home, flares gold for a record, glows "go" when a rest
   is over */
.orbbtn.pulse-land .orb{animation:orbsettle var(--m-slow) var(--e-spring)}
.orbbtn.pulse-land::after{animation:orbringsoft calc(var(--m-slow) * 1.4) var(--e-out)}
@keyframes orbsettle{0%{scale:.88}45%{scale:1.05}100%{scale:1}}
@keyframes orbringsoft{from{opacity:.5;transform:scale(.95)}to{opacity:0;transform:scale(1.55)}}
.orbbtn.pulse-warm::after{border-color:rgba(255,217,168,.95);animation:orbring calc(var(--m-slow) * 2.2) var(--e-out)}
.orbbtn.pulse-warm .orb{animation:orbprpop calc(var(--m-slow) * 1.6) var(--e-spring)}
.orbbtn.pulse-warm .orb::before{background:radial-gradient(closest-side,rgba(255,217,168,.85),rgba(255,170,90,.35) 55%,transparent);animation:orbglow calc(var(--m-slow) * 3) var(--e-out)}
#dock .orbbtn.pulse-warm .orb .core::after{inset:0;width:auto;rotate:none;background:radial-gradient(circle,rgba(255,233,204,.95),rgba(255,190,120,.45) 50%,transparent 75%);transform:none;animation:orbgold calc(var(--m-slow) * 3) var(--e-out)}
@keyframes orbprpop{0%{scale:1}25%{scale:1.16}100%{scale:1}}
@keyframes orbglow{0%{opacity:0;scale:.7}22%{opacity:1;scale:1.12}100%{opacity:0;scale:1.35}}
@keyframes orbgold{0%{opacity:0}18%{opacity:.95}100%{opacity:0}}
.orbbtn.pulse-go::after{animation:orbring calc(var(--m-slow) * 2) var(--e-out)}
.orbbtn.pulse-go .orb{animation:orbprpop calc(var(--m-slow) * 1.4) var(--e-spring)}
.orbbtn.pulse-go .orb::before{animation:orbglow calc(var(--m-slow) * 2.4) var(--e-out)}

/* now and then a glint of light crosses the dock orb */
#dock .orbbtn .orb .core::after{content:"";position:absolute;top:-50%;bottom:-50%;left:-60%;width:60%;pointer-events:none;opacity:0;rotate:20deg;
  background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.42) 50%,rgba(255,255,255,0));animation:orbglint calc(var(--m-drift) * 2) linear calc(var(--m-drift) * .6) infinite}
@keyframes orbglint{0%{transform:translateX(0);opacity:0}1%{opacity:1}6%{opacity:1}7%{transform:translateX(370%);opacity:0}100%{transform:translateX(370%);opacity:0}}

/* the rest, kept by the dock orb: a thin ring that drains to the end of it (two halves turning) */
.orest{position:absolute;inset:4px;border-radius:50%;pointer-events:none;opacity:0;transition:opacity var(--m-base) var(--e-out)}
.orest.on{opacity:1}
.orest::before{content:"";position:absolute;inset:0;border-radius:50%;border:2.5px solid rgba(var(--a-rgb),.13)}
.orest i{position:absolute;inset:0;clip-path:inset(0 0 0 50%)}
.orest b{position:absolute;inset:0;border-radius:50%;border:2.5px solid var(--accent);clip-path:inset(0 0 0 50%);will-change:rotate}
.orest i + i,.orest i + i b{clip-path:inset(0 50% 0 0)}

/* didn't get it: the orb shakes its head */
#app .orb.shake{animation:orbshake calc(var(--m-slow) * 1.2) var(--e-out)}
@keyframes orbshake{0%,100%{translate:0 0}14%{translate:calc(var(--s) * -.07) 0}32%{translate:calc(var(--s) * .055) 0}50%{translate:calc(var(--s) * -.035) 0}68%{translate:calc(var(--s) * .018) 0}84%{translate:calc(var(--s) * -.008) 0}}

/* listening: the body of your voice swells the core, its edge (s, t, k) lights the rim */
.orb.big .core b:nth-child(3),.orb.lift .core b:nth-child(3){scale:calc(1 + var(--lo, 0) * .9);opacity:calc(.5 + var(--lo, 0) * .45)}
.orb.big::after,.orb.lift::after{content:"";position:absolute;inset:-2px;border-radius:50%;pointer-events:none;border:2px solid rgba(255,255,255,.8);
  box-shadow:0 0 14px rgba(var(--a-rgb),.8),inset 0 0 10px rgba(var(--a-rgb),.6);opacity:calc(var(--hi, 0) * .9);transform:scale(calc(1 + var(--hi, 0) * .05))}

/* thinking: a slow swirl inside the orb */
.vlayer[data-phase=thinking] .orb .core,.ofloat[data-phase=thinking] .orb .core{animation:breathe calc(var(--m-drift) * .75) var(--e-soft) infinite,orbswirl calc(var(--m-think) * 1.5) linear infinite}
.app.thinking .composer .corb .orb .core{animation:orbwork calc(var(--m-think) * 1.1) var(--e-soft) infinite,orbswirl calc(var(--m-think) * 1.5) linear infinite}
@keyframes orbswirl{to{rotate:360deg}}

@media (prefers-reduced-motion: reduce){
  .orbstreak,.orbspark{display:none}
  #dock .orbbtn .orb .core::after,#app .orb.shake{animation:none}
  .orbbtn:is(.pulse-land,.pulse-warm,.pulse-go) .orb,.orbbtn:is(.pulse-land,.pulse-warm,.pulse-go) .orb::before,.orbbtn:is(.pulse-land,.pulse-warm,.pulse-go) .orb .core::after,.orbbtn:is(.pulse-land,.pulse-warm,.pulse-go)::after{animation:none}
  .vlayer[data-phase=thinking] .orb .core,.ofloat[data-phase=thinking] .orb .core,.app.thinking .composer .corb .orb .core{animation:none}
  .orb.big::after,.orb.lift::after{transform:none}
}
html[data-motion=off] :is(.orbstreak,.orbspark){display:none}
html[data-motion=off] #dock .orbbtn .orb .core::after,html[data-motion=off] #app .orb.shake{animation:none}
html[data-motion=off] :is(.vlayer[data-phase=thinking] .orb .core,.ofloat[data-phase=thinking] .orb .core,.app.thinking .composer .corb .orb .core){animation:none}

/* ======================= 1.54.2: replies flow in ======================= */
/* while a reply streams, the report flag's place beside it is kept free, so the text doesn't re-wrap
   the moment the reply finishes and the flag appears */
.msg.ai.is-streaming:not(.is-thinking)::after{content:"";flex:none;width:28px}

/* ======================= 1.54.4 ======================= */
/* Progress: a chart drawing itself only lays out its own card, not the whole page, on every frame */
.chartcard{contain:layout paint}
/* the bar charts as boxes (see barChart): same look as the SVG ones, growing on the GPU */
.chart.hbars{position:relative;width:100%;height:auto}
.chart.hbars .bar-r{position:absolute;display:block;transform-origin:50% 100%;background:linear-gradient(to bottom,var(--accent),color-mix(in srgb,var(--accent) 55%,transparent))}
.chart.hbars.blue .bar-r{background:linear-gradient(to bottom,#5B86FF,color-mix(in srgb,#3E5FCC 55%,transparent))}
.chart.hbars .base{position:absolute;left:0;right:0;height:1px;background:rgba(255,255,255,.08)}
.chart.hbars .ax{position:absolute;left:0;bottom:0;font-size:10px;line-height:1;fill:none;color:var(--dim);font-weight:700;font-family:var(--font)}
.chart.hbars .ax.ax-end{left:auto;right:0}
.screen.enter .chart.hbars .bar-r,.chart.hbars.draw .bar-r{will-change:transform}
@media (prefers-reduced-motion: reduce){ .chart .bar-r{animation:none} }
html[data-motion=off] .chart .bar-r{animation:none}
/* the line chart: the line and its area stay SVG, its dots and the record's halo are boxes over it */
.chart.hline{position:relative;width:100%}
.chart.hline > svg{display:block;width:100%;height:auto;overflow:visible}
.chart.hline .dot,.chart.hline .halo{position:absolute;display:block;aspect-ratio:1;border-radius:50%;background:var(--accent);transform-origin:50% 50%}
.chart.hline .dot.warm{background:#FFD9A8}
.chart.hline .halo{background:#FFD9A8}
/* the live dot (Up next, the workout mini bar, listening): its ring grows and fades on the GPU. It used
   to animate a shadow, which repainted on every frame for as long as a workout ran, on every tab */
.upcoming .live i,.minibar .dot,.vlayer[data-phase=listening] .live i{animation:none;position:relative}
.upcoming .live i::after,.minibar .dot::after,.vlayer[data-phase=listening] .live i::after{content:"";position:absolute;inset:0;border-radius:50%;background:rgba(var(--a-rgb),.6);pointer-events:none;animation:micring calc(var(--m-slow) * 3) var(--e-out) infinite}
@keyframes micring{from{transform:scale(1);opacity:.9}70%,to{transform:scale(3.25);opacity:0}}
.upcoming .live.paused i::after,.minibar .dot.paused::after{animation:none;opacity:0}
@media (prefers-reduced-motion: reduce){ .upcoming .live i::after,.minibar .dot::after,.vlayer[data-phase=listening] .live i::after{animation:none;opacity:0} }
html[data-motion=off] :is(.upcoming .live i,.minibar .dot,.vlayer[data-phase=listening] .live i)::after{animation:none;opacity:0}
/* a moving exercise figure only lays out itself */
svg.fig[data-move]{contain:layout paint}

/* ======================= 1.55: seamless landings ======================= */
/* the orb glides to a stop in the dock: only a faint ring of light, no squash or bounce */
.orbbtn.pulse-land .orb{animation:none}
.orbbtn.pulse-land::after{animation:orbringsoft calc(var(--m-slow) * 1.6) var(--e-out)}
.btn2.delw{width:100%;margin:10px 0 8px}

/* ======================= 1.56: typography and touch ======================= */
/* headlines in two weights: the first word carries it, the rest is lighter and softer */
.greet .gw{font-weight:560;color:color-mix(in srgb,var(--ink) 64%,transparent)}
.greet .gw.gw-lead{font-weight:800;color:var(--ink)}
/* titles arrive word by word: each blurs in and rises a touch */
.greet .gw,.tw{display:inline-block}
.screen.enter .greet .gw,.screen.enter .tw{animation:titleword calc(var(--m-slow) * 1.5) var(--e-out) both;animation-delay:calc(var(--i) * 65ms + var(--m-press) / 2)}
@keyframes titleword{from{opacity:0;filter:blur(8px);transform:translateY(.32em)}}
@media (prefers-reduced-motion: reduce){ .screen.enter .greet .gw,.screen.enter .tw{animation:none} }
html[data-motion=off] .screen.enter :is(.greet .gw,.tw){animation:none}
/* buttons are full pills */
.log,.btn2{border-radius:999px}
/* record tiles: a glossy medal on each (gold for a record from the last week), and a tilt when pressed */
.prtile{padding-right:52px;transition:transform var(--m-slow) var(--e-spring)}
.prtile.tilting{transition:transform var(--m-fast) var(--e-out)}
.prbadge{position:absolute;top:12px;right:12px;width:32px;height:32px;border-radius:50%;display:grid;place-items:center;transition:transform var(--m-slow) var(--e-spring);
  background:conic-gradient(from 210deg,#f4f1ff,#a99af2 18%,#ffffff 32%,#7a67f2 52%,#d9d2ff 70%,#8f7ff0 86%,#f4f1ff);
  box-shadow:inset 0 1px 1px rgba(255,255,255,.9),inset 0 -2px 3px rgba(40,25,110,.45),0 4px 12px -3px rgba(var(--v-rgb),.7)}
.prbadge::before{content:"";position:absolute;inset:4px;border-radius:50%;background:radial-gradient(circle at 35% 30%,color-mix(in srgb,var(--accent) 55%,#fff),var(--violet) 75%);box-shadow:inset 0 1px 2px rgba(20,10,60,.55)}
.prbadge svg{position:relative;width:14px;height:14px;fill:#fff;filter:drop-shadow(0 1px 1px rgba(20,10,60,.5))}
.prtile.fresh .prbadge{background:conic-gradient(from 210deg,#fff4e2,#e2a35c 18%,#fffaf0 32%,#b97a35 52%,#ffe2b8 70%,#cf9148 86%,#fff4e2);box-shadow:inset 0 1px 1px rgba(255,255,255,.9),inset 0 -2px 3px rgba(110,60,10,.45),0 4px 14px -3px rgba(255,190,110,.75)}
.prtile.fresh .prbadge::before{background:radial-gradient(circle at 35% 30%,#fff1d6,#e0a256 75%);box-shadow:inset 0 1px 2px rgba(90,45,5,.5)}
.prtile.fresh .prbadge svg{fill:#fffaf0;filter:drop-shadow(0 1px 1px rgba(90,45,5,.55))}
.prshine{position:absolute;inset:0;pointer-events:none;border-radius:inherit;opacity:0;background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.10) 50%,transparent 65%);transition:opacity var(--m-fast) var(--e-out),transform var(--m-slow) var(--e-spring)}
.prtile.tilting .prshine{opacity:1}
@media (prefers-reduced-motion: reduce){ .prtile,.prbadge,.prshine{transition:none} }
.prtile{animation-fill-mode:backwards}