/* DietSetu v3 additions. Loaded after app.css. Everything uses the same CSS variables, so Brand settings and dark mode still apply.
   Sections: 1 press feedback & busy spinner · 2 avatars · 3 consent banner · 4 login code & goal picker · 5 trackers & charts
   6 meals · 7 recipes · 8 chat extras · 9 staff screens · 10 misc */

/* ---------- 1. press feedback & busy spinner (item 9) ---------- */
.btn,.iconbtn,.chip,.slot,.fchip,.dchip,.goal,.choice,.qa,.tile-main,.segnav a,.tabs a,.linkrow,.rowlink,.seg span{-webkit-tap-highlight-color:transparent;touch-action:manipulation;user-select:none}
.btn:active,.btn.pressed{transform:scale(.95);filter:brightness(.92);box-shadow:none;transition-duration:.06s}
.iconbtn:active,.iconbtn.pressed{transform:scale(.9);background:var(--g100)}
.chip.pressed,.slot.pressed,.fchip.pressed,.dchip.pressed,.goal.pressed,.choice.pressed,.seg label.pressed span{transform:scale(.95);filter:brightness(.94)}
.qa.pressed,.tile-main.pressed,.linkrow.pressed,.rowlink.pressed,a.card.pressed{transform:scale(.97);box-shadow:var(--sh-s)}
.tabs a.pressed,.segnav a.pressed,.menu a.pressed,.menu button.pressed{background:var(--g100);transform:scale(.96)}
.is-busy{position:relative;pointer-events:none;cursor:progress}
.btn.is-busy,.iconbtn.is-busy,.fchip.is-busy,.choice.is-busy,.slot.is-busy{opacity:.85}
.btn.is-busy::after,.iconbtn.is-busy::after,.slot.is-busy::after{content:"";width:1.05em;height:1.05em;border-radius:50%;border:2.5px solid currentColor;border-right-color:transparent;animation:spin .7s linear infinite;flex:none}
.btn.is-busy.block::after{margin-left:.2rem}
@keyframes spin{to{transform:rotate(360deg)}}
.toast{display:flex;align-items:center;gap:.5rem;animation:rise .22s var(--ease)}
.toast:not(.err){background:var(--g800);color:#fff}
html[data-theme=dark] .toast:not(.err){background:var(--g100);color:var(--ink)}
@media (prefers-reduced-motion:reduce){.btn:active,.btn.pressed{transform:none}.is-busy::after{animation:none!important;border-style:dotted}}

/* ---------- 2. avatars with photos ---------- */
.avatar{position:relative;overflow:hidden;user-select:none}
.avatar img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:50%;background:var(--g100)}
.avatar.has-img{color:transparent}
.photobox{display:flex;gap:1.2rem;align-items:center;flex-wrap:wrap}
.photobox .avatar{box-shadow:0 0 0 4px var(--g100),var(--sh)}
.filepick{display:inline-flex}
.dcard{border-color:color-mix(in srgb,var(--g600) 30%,var(--line))}
.chips{display:flex;gap:.4rem;flex-wrap:wrap;margin-top:.5rem}
.menu .who{text-decoration:none}
.menu .who .grow{min-width:0}
.avatars{display:flex;gap:.6rem;flex-wrap:wrap}
.chipperson{display:inline-flex;align-items:center;gap:.5rem;padding:.3rem .8rem .3rem .3rem;border:1px solid var(--line);border-radius:999px;background:var(--surface);text-decoration:none;color:var(--ink);min-height:44px}
.chipperson small{display:block;font-size:.72rem;color:var(--muted);line-height:1.1}
.chipperson span{line-height:1.2;font-weight:700}

/* ---------- 3. consent banner ---------- */
.cookie{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(var(--nav-h) + 12px + env(safe-area-inset-bottom));z-index:350;width:min(640px,calc(100vw - 20px));background:var(--surface);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh-l);padding:.9rem 1rem;display:flex;gap:.8rem;align-items:center;flex-wrap:wrap;animation:rise .3s var(--ease)}
.cookie p{margin:0;flex:1 1 260px;font-size:.9rem}
.cookie>.ico{color:var(--g600)}
@media(min-width:900px){.cookie{bottom:18px}}
body.anon .cookie{bottom:14px}

/* ---------- 4. login code & goal picker ---------- */
.otp{text-align:center}
.otp-icon{width:56px;height:56px;border-radius:18px;background:var(--g100);color:var(--g700);display:flex;align-items:center;justify-content:center;margin:0 auto .6rem}
.otp-icon .ico{width:28px;height:28px}
.otp .field{text-align:left}
.otp-input{text-align:center;font-family:var(--display);font-size:2rem!important;letter-spacing:.5em;padding-left:.5em!important;min-height:64px!important;font-weight:600}
.otp-input::placeholder{letter-spacing:.3em;opacity:.4}
.otp-demo{letter-spacing:.4em;font-size:2rem;margin:.2rem 0 .5rem}
.otp-actions{margin-top:.8rem}
.err-text{color:var(--red);min-height:1.3em;margin:.2rem 0 .6rem;font-weight:700}
.linkbtn{background:none;border:0;font:inherit;color:var(--g700);text-decoration:underline;cursor:pointer;min-height:44px;padding:0 .4rem}
html[data-theme=dark] .linkbtn{color:#8FD6A8}
.goalgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:.6rem}
@media(min-width:600px){.goalgrid{grid-template-columns:repeat(3,1fr)}}
.goal{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:.15rem;text-align:left;padding:.85rem .9rem;min-height:84px;border-radius:var(--r-s);border:2px solid var(--line);background:var(--surface);font:inherit;color:var(--ink);cursor:pointer;transition:border-color .18s,box-shadow .18s,transform .18s var(--ease),background .18s}
.goal b{font-size:.98rem;color:var(--head)}
.goal .badge{position:absolute;top:-10px;right:8px;font-size:.66rem;padding:.1rem .5rem}
.goal:hover{border-color:var(--g600)}
.goal.hl{border-color:color-mix(in srgb,var(--o500) 55%,var(--line))}
.goal.on{background:var(--g100);border-color:var(--g700);box-shadow:0 0 0 3px color-mix(in srgb,var(--g600) 25%,transparent)}
.goal.on::after{content:"✓";position:absolute;right:10px;bottom:8px;width:22px;height:22px;border-radius:50%;background:var(--g700);color:#fff;font-size:.8rem;display:flex;align-items:center;justify-content:center;font-weight:800}
.forgoal{margin-bottom:.4rem}
.morepk{margin:1.4rem 0}.morepk summary{cursor:pointer;font-weight:800;min-height:44px;display:flex;align-items:center;color:var(--g700)}

/* ---------- 5. trackers & charts ---------- */
.ticon{width:42px;height:42px;border-radius:14px;background:var(--g100);color:var(--g700);display:inline-flex;align-items:center;justify-content:center;flex:none}
html[data-theme=dark] .ticon{color:#8FD6A8}
.streakchip{display:inline-flex;align-items:center;gap:.35rem;padding:.3rem .8rem;border-radius:999px;background:var(--surface-2);border:1px solid var(--line);font-weight:800;font-size:.85rem;color:var(--muted)}
.streakchip .ico{width:18px;height:18px}
.streakchip.on{background:var(--o50);color:var(--o700);border-color:color-mix(in srgb,var(--o500) 40%,var(--line))}
.tiles{display:grid;grid-template-columns:repeat(2,1fr);gap:.8rem;margin:1rem 0}
@media(min-width:700px){.tiles{grid-template-columns:repeat(3,1fr)}}
.tile{position:relative;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh-s);transition:box-shadow .2s,transform .2s var(--ease)}
.tile:hover{box-shadow:var(--sh);transform:translateY(-2px)}
.tile.done{border-color:color-mix(in srgb,var(--g600) 45%,var(--line));background:linear-gradient(180deg,var(--surface),color-mix(in srgb,var(--g100) 55%,var(--surface)))}
.tile-main{display:flex;flex-direction:column;gap:.35rem;padding:.95rem;text-decoration:none;color:inherit;min-height:138px;border-radius:var(--r)}
.tname{font-weight:800;color:var(--head)}
.tval{font-family:var(--display);font-size:1.5rem;font-weight:600;color:var(--head);line-height:1.1}
.tval small{font-family:var(--font);font-size:.72rem;color:var(--muted);margin-left:.35rem;font-weight:700}
.tile-add{position:absolute;right:.5rem;bottom:.5rem;min-height:44px;min-width:44px;padding:0 .7rem}
.tstreak{position:absolute;right:.8rem;top:.85rem;display:inline-flex;gap:.2rem;align-items:center;font-size:.78rem;font-weight:800;color:var(--o700)}
.tstreak .ico{width:15px;height:15px}
.dots14{width:100%;max-width:92px;height:10px;margin-top:auto}
.dots14 rect{fill:var(--g100)}.dots14 rect.on{fill:var(--g600)}
.linkrow{display:flex;align-items:center;gap:.8rem;text-decoration:none;color:inherit}
.minitiles{display:grid;grid-template-columns:repeat(4,1fr);gap:.5rem;margin:.6rem 0}
@media(max-width:480px){.minitiles{grid-template-columns:repeat(2,1fr)}}
.minitile{display:flex;flex-direction:column;align-items:center;gap:.2rem;text-align:center;padding:.7rem .3rem;border-radius:var(--r-s);border:1px solid var(--line);background:var(--surface-2);text-decoration:none;color:var(--ink);min-height:92px;justify-content:center;transition:transform .18s var(--ease)}
.minitile small{font-size:.7rem;color:var(--muted)}
.minitile.done{background:var(--g100);border-color:color-mix(in srgb,var(--g600) 40%,var(--line))}
.minitile:hover{transform:translateY(-2px)}
.tip{display:flex;gap:.7rem;align-items:flex-start;background:var(--o50);border-radius:var(--r-s);padding:.7rem .9rem;margin-top:.4rem}
.tip .ico{color:var(--o700);margin-top:.1rem}.tip p{margin:0;font-size:.92rem}
.entryform .seg{margin-bottom:.2rem}
.seg.scale span{min-width:48px;padding:0 .9rem}
.stepper{display:flex;gap:.5rem;align-items:center}.stepper input{text-align:center;font-weight:800;font-size:1.1rem}
.stepper .iconbtn{font-size:1.4rem;min-width:52px;min-height:52px;flex:none}
.datepick input{min-height:44px;width:auto}
.chart .target{stroke:var(--o600)}.chart .rb.hit{fill:var(--lime-d)}
.cyclebox .stats{grid-template-columns:repeat(2,1fr)}
.photogrid{display:grid;grid-template-columns:repeat(3,1fr);gap:.6rem}
@media(min-width:700px){.photogrid{grid-template-columns:repeat(4,1fr)}}
.photogrid:has(.empty){display:block}
.ph{margin:0}.ph figcaption{font-size:.74rem;color:var(--muted);margin-top:.25rem;text-transform:capitalize}
.phbtn{display:block;width:100%;aspect-ratio:3/4;border:0;padding:0;border-radius:var(--r-s);overflow:hidden;cursor:pointer;background:var(--g100)}
.phbtn img{width:100%;height:100%;object-fit:cover;display:block}
.phbig{width:100%;max-height:70vh;object-fit:contain;border-radius:var(--r-s);background:#000}

/* ---------- 6. meals ---------- */
.daystrip{display:flex;gap:.45rem;overflow-x:auto;padding:.2rem .1rem .6rem;margin-bottom:.6rem;scrollbar-width:none}
.dchip{flex:none;min-width:58px;min-height:68px;border-radius:18px;border:2px solid var(--line);background:var(--surface);font:inherit;color:var(--head);cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;transition:all .18s var(--ease)}
.dchip small{font-size:.7rem;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);font-weight:800}.dchip b{font-family:var(--display);font-size:1.3rem;font-weight:600}
.dchip.today{border-color:color-mix(in srgb,var(--o500) 60%,var(--line))}
.dchip.on{background:var(--g700);border-color:var(--g700);color:#fff;box-shadow:0 10px 20px -10px var(--g700);transform:translateY(-2px)}
.dchip.on small{color:rgba(255,255,255,.85)}
.daysum{display:flex;gap:1rem;align-items:center}
.meals{display:grid;gap:.8rem}
.meal{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:1rem;box-shadow:var(--sh-s);border-left:5px solid var(--line);transition:all .25s var(--ease)}
.meal h3{margin:.15rem 0 .3rem;font-size:1.12rem}
.meal.ate{border-left-color:var(--g600);background:linear-gradient(90deg,color-mix(in srgb,var(--g100) 60%,var(--surface)),var(--surface))}
.meal.skipped{opacity:.7;border-left-color:var(--muted)}
.slot-label{font-size:.76rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--g700)}
html[data-theme=dark] .slot-label{color:var(--lime)}
.meal-actions{margin-top:.5rem}
.choice{display:flex;flex-direction:column;align-items:flex-start;gap:.15rem;text-align:left;width:100%;padding:.8rem 1rem;min-height:56px;border-radius:var(--r-s);border:2px solid var(--line);background:var(--surface);font:inherit;color:var(--ink);cursor:pointer;margin-bottom:.5rem;position:relative}
.choice.on{border-color:var(--g700);background:var(--g100)}.choice .ico{position:absolute;right:.8rem;top:.8rem;color:var(--g700)}
.mealrow{display:grid;gap:.5rem}.mealrow textarea{min-height:64px}
.stickyact{position:sticky;bottom:calc(var(--nav-h) + 6px);background:color-mix(in srgb,var(--surface) 94%,transparent);backdrop-filter:blur(8px);padding:.6rem;border:1px solid var(--line);border-radius:var(--r);margin-top:1rem;z-index:5}
@media(min-width:900px){.stickyact{bottom:8px}}

/* ---------- 7. recipes & articles ---------- */
.recipes{display:grid;gap:.7rem}
@media(min-width:760px){.recipes{grid-template-columns:repeat(2,1fr)}}
.rcard{display:flex;gap:.6rem;align-items:flex-start;margin:0;padding:0}
.rcard-main{flex:1;text-align:left;border:0;background:none;font:inherit;color:inherit;padding:1rem;cursor:pointer;border-radius:var(--r);min-height:96px}
.rcard-main h3{margin:0 0 .2rem}.rcard-main p{margin:0 0 .5rem}.rcard>.btn{margin:.8rem .8rem 0 0}
.rcard.off{opacity:.65}
.method{padding-left:1.2rem}.method li{margin-bottom:.4rem}
.stars{display:flex;gap:.2rem;margin:.4rem 0 .8rem}
.star{width:52px;height:52px;border:0;background:none;color:var(--line);cursor:pointer;border-radius:50%;display:flex;align-items:center;justify-content:center;transition:transform .15s var(--ease),color .15s}
.star .ico{width:36px;height:36px;fill:currentColor}
.star.on{color:var(--o500)}.star:active,.star.pressed{transform:scale(1.2)}
.feedback textarea{margin-bottom:.7rem}

/* ---------- 8. chat extras ---------- */
.msgrow{display:flex;gap:.45rem;align-items:flex-end;align-self:flex-start;max-width:90%}
.msgrow .msg{max-width:none}
.msg .msgimg{display:block;margin:-.15rem -.35rem .35rem;border-radius:14px;overflow:hidden}
.msg .msgimg img{display:block;max-width:min(260px,62vw);max-height:300px;width:auto;height:auto}
.composer .attach{flex:none;min-width:44px;padding:0}
.composer .filepick .attach{border:0}
.chathead .grow{min-width:0}
.newreply{margin-top:.8rem}.newreply summary{cursor:pointer;font-weight:800;min-height:44px;display:flex;align-items:center}

/* ---------- 9. staff screens ---------- */
.today .appt{margin-bottom:.7rem}
.today .next-card .btn.ghost{color:#fff}
.note{padding:.8rem 0;border-bottom:1px solid var(--line)}.note:last-child{border:0}
.hbars{display:grid;gap:.8rem}.hbar .row{font-size:.9rem}.hbar .bar{margin-top:.25rem}
.alert.new{background:var(--o50);margin:0 -.5rem;padding-left:.5rem;padding-right:.5rem;border-radius:12px}
.alert{text-decoration:none;color:inherit}
.segnav.scroll{margin-left:-.2rem}
.quick .btn{flex:none}
.client-head .avatar{box-shadow:0 0 0 3px var(--g100)}
.upigrid{display:grid;grid-template-columns:repeat(2,1fr);gap:.6rem;margin:.6rem 0}
.upi h3{margin-bottom:.2rem}
.paycard .upi{margin:.6rem 0 1rem}

/* ---------- 10. polish ---------- */
.card{animation:rise .3s var(--ease) both}
.btn:focus-visible,.goal:focus-visible,.dchip:focus-visible,.choice:focus-visible,.star:focus-visible,.phbtn:focus-visible,.rcard-main:focus-visible{outline:3px solid var(--o600);outline-offset:2px}
.seg input:focus-visible+span{outline:3px solid var(--o600);outline-offset:2px}
.tabs a:focus-visible{outline-offset:-3px}
@media(max-width:380px){.btn.sm{padding:0 .8rem}.goalgrid{grid-template-columns:1fr 1fr}.otp-input{letter-spacing:.3em;font-size:1.7rem!important}}
@media(prefers-contrast:more){.card,.tile,.meal{border-color:var(--ink)}}

/* ---- coupons + goals ---- */
.couponbox label{display:flex;align-items:center;gap:.4rem;font-weight:800;color:var(--head);margin-bottom:.4rem}
.couponbox .row{flex-wrap:nowrap;gap:.5rem}
.couponbox input{flex:1;min-width:0;text-transform:uppercase;letter-spacing:.06em;font-weight:700}
.couponmsg{min-height:1.3em;margin:.4rem 0 0;font-weight:700}
.couponmsg.ok{color:var(--g700)}.couponmsg.bad{color:var(--red)}
.couponmsg.ok::before{content:"✓ "}.couponmsg.bad::before{content:"✕ "}
.totalrow{font-size:1.15rem;padding-top:.6rem;border-top:1px dashed var(--line)}
.checktotal{font-family:var(--display);font-size:1.6rem;color:var(--head)}
.disc{color:var(--g700);font-weight:700}
.pricelines{margin-top:.7rem;padding-top:.6rem;border-top:1px dashed var(--line);display:grid;gap:.3rem}
.pricelines .total{font-size:1.1rem;padding-top:.3rem;border-top:1px solid var(--line)}
.couponfold summary{cursor:pointer;font-weight:800;color:var(--head);min-height:44px;display:flex;align-items:center;gap:.4rem}
.couponfold .row{margin-top:.6rem}
.coupon .code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.08em;margin:0;color:var(--head);font-size:1.02rem}
.coupon.off{opacity:.72}
.cstats{display:grid;grid-template-columns:repeat(2,1fr);gap:.6rem;margin:.7rem 0}
@media(min-width:700px){.cstats{grid-template-columns:repeat(4,1fr)}}
.cstats div{display:flex;flex-direction:column;background:var(--surface-2);border-radius:var(--r-s);padding:.6rem .7rem}
.goalwrap{display:grid;gap:.7rem}
.moregoals summary{cursor:pointer;font-weight:800;color:var(--g700);min-height:44px;display:flex;align-items:center}
.moregoals .goalgrid{margin-top:.5rem}

/* ---- legal: footer links, acceptance box, public legal pages ---- */
.legalbar{display:flex;flex-wrap:wrap;gap:.25rem .6rem;justify-content:center;align-items:center;padding:1rem 1rem calc(5.6rem + env(safe-area-inset-bottom));font-size:.82rem;color:var(--muted)}
.legalbar a{color:var(--muted);text-decoration:underline;text-underline-offset:2px;padding:.35rem .15rem;min-height:40px;display:inline-flex;align-items:center}
.legalbar a:hover,.legalbar a:focus-visible{color:var(--g700)}
@media (min-width:900px){.shell>.legalbar{grid-area:foot;padding-bottom:1.4rem}}
.shell.solo>.legalbar{padding-bottom:1.4rem}
.policybox{display:grid;gap:.55rem;padding:.8rem;border:1px solid var(--line);border-radius:14px;background:var(--surface)}
.policybox .check{display:flex;gap:.65rem;align-items:flex-start;font-weight:600;cursor:pointer;line-height:1.4;min-height:44px}
.policybox .check input{width:22px;height:22px;flex:none;margin-top:.1rem;accent-color:var(--g600)}
.policybox .check a{color:var(--g700);text-decoration:underline}
.readpolicy summary{cursor:pointer;color:var(--g700);font-weight:700;min-height:36px;display:flex;align-items:center}
.readpolicy .legal-text{max-height:42vh;overflow:auto;padding:.4rem .2rem;font-size:.9rem;border-top:1px solid var(--line);margin-top:.3rem}
.legal-text h3{font-size:.95rem;margin:.9rem 0 .25rem}.legal-text p,.legal-text li{margin:.25rem 0;line-height:1.55}.legal-text ul{padding-left:1.2rem;margin:.3rem 0}
.legalpage{background:var(--bg,#fbfaf6);color:var(--ink);font-family:var(--font)}
.legal-top{display:flex;justify-content:space-between;align-items:center;max-width:760px;margin:0 auto;padding:.9rem 1rem}
.legal-brand{font-family:var(--display);font-weight:700;font-size:1.25rem;color:var(--g800);text-decoration:none}
.legal-doc{max-width:760px;margin:0 auto;padding:.5rem 1rem 2rem;line-height:1.65}
.legal-doc h1{font-family:var(--display);font-size:clamp(1.6rem,5vw,2.2rem);margin:.4rem 0 .5rem}
.legal-doc h2{font-size:1.1rem;margin:1.5rem 0 .3rem}.legal-doc ul{padding-left:1.25rem}.legal-doc li{margin:.3rem 0}
.legal-draft{background:var(--o50);border:1px solid var(--o500);border-radius:12px;padding:.65rem .85rem;color:var(--ink)}
.legal-foot{max-width:760px;margin:0 auto;padding:1rem 1rem 2.5rem;text-align:center;font-size:.9rem;color:var(--muted)}
.legal-foot a{color:var(--g700)}
.draftflag{display:inline-flex;align-items:center;gap:.3rem;background:var(--o50);color:var(--o700);border:1px solid var(--o500);border-radius:999px;padding:.12rem .6rem;font-size:.78rem;font-weight:700}
.legalcard{border:1px solid var(--line);border-radius:14px;padding:.8rem;display:grid;gap:.5rem;margin:.6rem 0}
.legalcard textarea{min-height:240px;font-size:.92rem;line-height:1.5}
.legalprev{background:var(--g50);border-radius:12px;padding:.6rem .8rem;font-size:.9rem}
.acceptrow{font-size:.78rem;color:var(--muted);display:inline-flex;gap:.25rem;align-items:center}

/* ---------- Exercise ---------- */
.qa-grid{grid-template-columns:repeat(auto-fit,minmax(96px,1fr))}
@media(max-width:560px){.qa-grid{grid-template-columns:repeat(auto-fit,minmax(96px,1fr))}}
.exview,.exlib,.explan{display:block}
.exview .stack>*+*,.exlib .stack>*+*{margin-top:0}
.exsafety{display:flex;gap:.55rem;align-items:flex-start;padding:.6rem .8rem;border-radius:var(--r-s);background:var(--surface-2);border:1px solid var(--line);color:var(--muted);margin:.6rem 0 1rem}
.exsafety .ico{width:18px;height:18px;flex:none;margin-top:.1rem}
.daystrip{display:flex;gap:.45rem;flex-wrap:wrap}
.daychip{min-height:44px;padding:0 1rem;border-radius:999px;border:2px solid var(--line);background:var(--surface);font-weight:700;color:var(--g800);cursor:pointer;font:inherit;font-weight:700}
html[data-theme=dark] .daychip{color:var(--ink)}
.daychip.on{background:var(--g700);border-color:var(--g700);color:#fff}
.exhead .bigline,.exsummary .bigline{font-size:1.5rem;font-family:var(--font-display,inherit)}
.exsummary .bigline.warn{color:var(--o700)}
.statrow{display:grid;grid-template-columns:repeat(3,1fr);gap:.8rem;margin:.4rem 0 .6rem}
.weekdots{display:grid;grid-template-columns:repeat(7,1fr);gap:.35rem;margin-top:.8rem}
.wd{display:flex;flex-direction:column;align-items:center;gap:.1rem;padding:.35rem 0;border-radius:var(--r-s);border:1px solid var(--line);background:var(--surface)}
.wd i{font-style:normal;font-weight:800;font-size:.85rem}
.wd small{font-size:.7rem;color:var(--muted)}
.wd.full{background:var(--g100);border-color:color-mix(in srgb,var(--g600) 45%,var(--line))}
.wd.part{background:var(--o50);border-color:color-mix(in srgb,var(--o500) 40%,var(--line))}
.wd.rest{opacity:.65;border-style:dashed}
.exlist{display:grid;gap:1rem}
.exitem{display:grid;gap:.8rem;padding:1rem}
.exitem.done{border-color:color-mix(in srgb,var(--g600) 50%,var(--line));background:color-mix(in srgb,var(--g100) 55%,var(--surface))}
.exitem h2{margin:0}
.excard h2{margin:0;font-size:1.1rem}
.exbody{display:grid;gap:.5rem;align-content:start}
.exmedia-wrap{position:relative;border-radius:var(--r-s);overflow:hidden;background:#E8F3EC;aspect-ratio:16/10;max-height:240px}
.exmedia-wrap.big{max-height:340px}
.exmedia{width:100%;height:100%;object-fit:contain;display:block;background:#E8F3EC}
.exmedia.ph{object-fit:cover}
.exhint{position:absolute;right:.5rem;bottom:.4rem;font-size:.7rem;font-weight:700;padding:.1rem .5rem;border-radius:999px;background:rgba(255,255,255,.85);color:#3a4a41}
.exchips{gap:.35rem}
.exnote{display:flex;gap:.45rem;align-items:flex-start;margin:0;padding:.5rem .7rem;border-radius:var(--r-s);background:var(--o50);color:var(--o700);font-weight:600}
.exnote .ico{width:18px;height:18px;flex:none;margin-top:.15rem}
.exhow summary{cursor:pointer;font-weight:700;min-height:44px;display:flex;align-items:center}
.exhow ol{margin:.4rem 0 0;padding-left:1.3rem}
.exact{gap:.5rem;margin-top:.3rem}
.exact .tick{min-width:150px}
.painflag{margin:0;padding:.5rem .7rem;border-radius:var(--r-s);background:var(--o50);color:var(--o700);font-weight:600}
.exlocked{display:flex;gap:1rem;align-items:flex-start}
.exlocked .ico{width:32px;height:32px;flex:none;color:var(--g700)}
.exgrid{display:grid;gap:1rem;grid-template-columns:1fr}
.excard{display:grid;gap:.7rem;padding:1rem}
.excard.off{opacity:.6}
.exrow{display:grid;gap:.6rem}
.exrow .exmedia-wrap{width:120px;flex:none;aspect-ratio:4/3}
.exrow .hint{display:none}
.routine-row{padding:.8rem}
.daysel{gap:.35rem}
.daysel span{min-height:44px;min-width:44px;padding:0 .7rem}
.filebtn{cursor:pointer}
@media(min-width:760px){
  .exitem{grid-template-columns:260px 1fr;align-items:start}
  .exitem .exmedia-wrap{aspect-ratio:4/3}
  .exgrid{grid-template-columns:repeat(2,1fr)}
}
@media(min-width:1100px){.exgrid{grid-template-columns:repeat(3,1fr)}}

/* ---------------- v3.1 fixes (phone QA) ---------------- */
/* Account menu + alerts panel: never taller than the screen. On phones they sit between the top bar and the bottom tab bar and scroll,
   so every item (Call, Log out…) can be reached. */
:root{--tabs-h:calc(66px + env(safe-area-inset-bottom))}
.menu,.notif{max-height:calc(100vh - var(--top-h) - 16px);max-height:calc(100dvh - var(--top-h) - env(safe-area-inset-top) - 16px);overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
@media (max-width:899px){
  .menu,.notif{max-height:calc(100vh - var(--top-h) - var(--tabs-h) - 14px);max-height:calc(100dvh - var(--top-h) - env(safe-area-inset-top) - var(--tabs-h) - 14px);max-width:calc(100vw - 1rem)}
  body.anon .menu{max-height:calc(100dvh - var(--top-h) - 16px)}
}
.menu .contactrow{display:flex;gap:.5rem;flex-wrap:wrap}
.menu .contactrow .btn{width:auto;flex:1 1 0;min-height:40px;justify-content:center;border:1px solid var(--line);border-radius:999px;font-weight:800;color:var(--g700);background:var(--surface)}
html[data-theme=dark] .menu .contactrow .btn{color:#8FD6A8}
.menu .menulabel{padding:.5rem .6rem .1rem}

/* "Next consult" / "Ready to start" cards and the incoming-call banner: the dark theme turned the green background light,
   which made the white "Open call room" button white-on-white. Keep these cards dark green in BOTH themes. */
html[data-theme=dark] .next-card{background:linear-gradient(135deg,var(--g900),var(--g700) 70%,color-mix(in srgb,var(--lime) 30%,var(--g700)))}
html[data-theme=dark] .incoming{background:linear-gradient(135deg,var(--g900),var(--g700))}
.next-card .eyebrow,html[data-theme=dark] .next-card .eyebrow{color:#fff}
.next-card .muted,html[data-theme=dark] .next-card .muted,.next-card .small,html[data-theme=dark] .next-card h2,html[data-theme=dark] .next-card h3,html[data-theme=dark] .next-card b{color:#fff}
.next-card .btn:not(.accent):not(.ghost),html[data-theme=dark] .next-card .btn:not(.accent):not(.ghost),
.incoming .btn:not(.accent):not(.ghost),html[data-theme=dark] .incoming .btn:not(.accent):not(.ghost){background:#fff;border-color:#fff;color:var(--g900)}
.next-card .btn:not(.accent):not(.ghost):hover,html[data-theme=dark] .next-card .btn:not(.accent):not(.ghost):hover,
.incoming .btn:not(.accent):not(.ghost):hover,html[data-theme=dark] .incoming .btn:not(.accent):not(.ghost):hover{background:#EAF5EE;border-color:#EAF5EE;color:var(--g900)}
.next-card .btn.ghost,html[data-theme=dark] .next-card .btn.ghost{background:rgba(255,255,255,.14);color:#fff;border-color:rgba(255,255,255,.55)}
.next-card .btn.ghost:hover,html[data-theme=dark] .next-card .btn.ghost:hover{background:rgba(255,255,255,.26);border-color:#fff;color:#fff}
.next-card .btn.accent,html[data-theme=dark] .next-card .btn.accent{background:var(--o500);border-color:var(--o500);color:#1b1206}
.next-card .btn.accent:hover,html[data-theme=dark] .next-card .btn.accent:hover{background:var(--o600);border-color:var(--o600);color:#1b1206}
html[data-theme=dark] .next-card a:not(.btn){color:#fff}

/* Buttons in dark mode: hover/pressed states keep readable text */
html[data-theme=dark] .btn.ghost:hover{color:var(--ink)}
html[data-theme=dark] .btn.danger:hover{color:var(--red)}
html[data-theme=dark] .btn.accent:hover{color:#1b1206}

/* Team list (and similar rows): the name block no longer gets squeezed to nothing next to its buttons */
.item>.row.grow{min-width:min(100%,220px)}
.item>.row.grow>div{min-width:0;flex:1}
.item>.row.grow b{overflow-wrap:anywhere}

/* Settings header ("v4 Autosaves · versioned" + save status) wraps instead of overlapping on small phones */
.formhead{flex-wrap:wrap;row-gap:.4rem}
.formhead>.row{min-width:0;flex:1 1 auto}

/* UPI buttons: "Google Pay" on one line on small phones */
.upigrid .btn.lg{font-size:.98rem;padding:0 .7rem;white-space:nowrap}
@media(max-width:380px){.upigrid .btn.lg{font-size:.9rem;padding:0 .5rem;gap:.35rem}}

/* Video-call status card for the owner */
.videosetup{border-left:4px solid var(--o500)}
.callvideo{position:absolute;inset:0;display:grid;background:#0b1410}
.callvideo video{width:100%;height:100%;object-fit:cover;background:#0b1410}
.callvideo .remote{position:absolute;inset:0}
.callvideo .remote video{object-fit:contain}
.callvideo .selfview{position:absolute;right:12px;bottom:12px;width:min(28vw,150px);aspect-ratio:3/4;border-radius:14px;overflow:hidden;border:2px solid rgba(255,255,255,.7);box-shadow:0 8px 24px rgba(0,0,0,.4);z-index:2;background:#1b2b23}
.callvideo .selfview video{transform:scaleX(-1)}
.callvideo .selfview.back video{transform:none}
.callvideo .waiting{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.8rem;color:#fff;text-align:center;padding:1rem}
.callvideo .waiting .small{opacity:.85}
.callvideo .selfview.off video,.callvideo .remote.off video{visibility:hidden}
.callvideo .remote .rav{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}
.callvideo .remote.voice.off::after{content:none}
.callvideo .remote.off::after{content:"Camera off";position:absolute;left:50%;bottom:18px;transform:translateX(-50%);color:#fff;font-weight:800;font-size:.85rem;background:rgba(0,0,0,.45);padding:.25rem .7rem;border-radius:999px}
/* v3.1: speaker / camera pop-up sits just above the call controls, centred (it used to open off-screen) */
.callbar{position:relative}
.callbar .devmenu{bottom:calc(100% - 4px);max-width:calc(100vw - 24px);max-height:50vh;overflow-y:auto}
/* v3.1: dark-mode text that was too faint (light-orange / lime backgrounds, dark-green text on dark cards) */
html[data-theme=dark] .badge.lime{color:#0B3D26}
html[data-theme=dark] .badge.orange,html[data-theme=dark] .tabs .dot,html[data-theme=dark] .navdot,html[data-theme=dark] .iconbtn .pip{color:#1b1206}
html[data-theme=dark] :is(.morepk summary,.moregoals summary,.readpolicy summary,.disc,.choice .ico,.exlocked .ico,.timeline .item .time,.otp-icon,.stat-ico,.callready.wait .pulse){color:#8FD6A8}
/* v3.1: the water "+1" button no longer covers "tap to log" on narrow phones */
.tile[data-kind=water] .tile-main{padding-bottom:3.6rem}