/* "Build my thali" - the patient's phone (static/patient_app_thali.js), Sara Aahaar add-on.
 * The look of the approved premium mock-up (patient-thali-premium.html + thali-premium.css): a steel top-down thali with katoris, frosted
 * glass, one orange header. Patient pages are ORANGE, never blue.
 *
 * EVERY class here starts with th- and every variable with --th-: a bare class once turned map pins into a page's footer, and this
 * sheet shares the page with the rest of the app. Nothing here styles a bare element outside .th-root.
 * Reduced motion (the last block): no flights, ripples, wobbles, sweeps, steam, count-ups or bar animations - the end state at once.
 * Fonts: Plus Jakarta Sans for everything, Playfair Display italic ONLY for the "Sara Aahaar" wordmark; Anek Telugu is added by the
 * script only when Telugu is chosen. */
@font-face{font-family:'ThPF';font-style:italic;font-weight:700;font-display:swap;src:url(/app/thali/font/playfairdisplay-italic-latin.woff2) format('woff2')}
@font-face{font-family:'ThPJ';font-weight:200 800;font-display:swap;src:url(/app/thali/font/plusjakartasans-latin.woff2) format('woff2')}
.th-root{
 --th-sf:#c4501b;--th-sf-deep:#9c3a0f;--th-sf-soft:#e58a50;--th-sf-wash:rgba(196,80,27,.09);
 --th-cream:#fbf4ea;--th-ink:#2b1d16;--th-ink2:#54433a;--th-mute:#7d6a5c;--th-hair:rgba(120,78,38,.14);
 --th-gold:#b8862f;--th-gold-l:#ecd596;--th-gold-ink:#7a5314;
 --th-amber:#d9992b;--th-sage:#6c9e83;--th-coral:#e0786a;
 --th-amber-ink:#8a5a12;--th-sage-ink:#3d6b51;--th-coral-ink:#a5412f;
 --th-spring:cubic-bezier(.32,.72,0,1);--th-pop:cubic-bezier(.34,1.56,.64,1);--th-soft:cubic-bezier(.3,.7,.3,1);
 --th-sans:ThPJ,'Segoe UI',system-ui,sans-serif;--th-tel:ThAT,ThPJ,'Nirmala UI',sans-serif;
 position:relative;display:flex;flex-direction:column;min-height:100vh;min-height:100dvh;max-width:520px;margin:0 auto;overflow-x:hidden;
 font:13px/1.4 var(--th-sans);color:var(--th-ink);font-variant-numeric:tabular-nums;-webkit-user-select:none;user-select:none;
 -webkit-tap-highlight-color:transparent}
.th-root,.th-root *{box-sizing:border-box}
.th-root [hidden]{display:none!important}
.th-root button{font-family:inherit;color:inherit}
.th-root h2,.th-root h3,.th-root p{margin:0}
.th-te,.th-te *{font-family:var(--th-tel)}
.th-te .th-wm{font-family:ThPF,Georgia,serif}

/* a warm, very subtle gradient with a fine grain over it */
.th-warm{background:
  radial-gradient(110% 46% at 50% 34%,rgba(255,200,150,.36),rgba(255,200,150,0) 66%),
  radial-gradient(70% 40% at 0% 100%,rgba(190,214,190,.26),rgba(190,214,190,0) 70%),
  linear-gradient(172deg,#fdf8f0 0%,#f9eee0 52%,#f4e3cd 100%)}
.th-grain::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:60;opacity:.15;mix-blend-mode:multiply;
 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='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .42  0 0 0 0 .27  0 0 0 0 .14  0 0 0 .9 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>")}
/* frosted glass */
.th-glass{background:rgba(255,251,245,.66);-webkit-backdrop-filter:blur(18px) saturate(1.25);backdrop-filter:blur(18px) saturate(1.25);
 box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 18px 34px -18px rgba(120,60,20,.28),0 2px 6px rgba(120,60,20,.05)}

/* ================= the steel thali ================= */
.th-stage{position:relative;width:311px;height:261px;flex:none}
.th-thali{position:absolute;border-radius:50%;
 background:
  repeating-radial-gradient(circle at 50% 50%,rgba(255,255,255,.16) 0 .7px,rgba(60,70,80,.045) .7px 1.5px),
  conic-gradient(from 28deg,#dfe2e4,#fbfbfb 9%,#c2c7cb 21%,#eef0f1 33%,#b4babf 47%,#f5f6f6 60%,#c9ced2 73%,#fcfcfc 86%,#dfe2e4);
 box-shadow:0 2px 3px rgba(40,30,20,.28),0 22px 26px -10px rgba(40,22,8,.40),0 50px 58px -28px rgba(40,22,8,.34),inset 0 0 0 1.5px rgba(70,78,86,.38),inset 0 2px 3px rgba(255,255,255,.95);
 transition:box-shadow .8s var(--th-soft)}
.th-thali::before{content:"";position:absolute;inset:6.4%;border-radius:50%;
 background:repeating-radial-gradient(circle at 50% 50%,rgba(255,255,255,.14) 0 .7px,rgba(60,70,80,.04) .7px 1.5px),
  conic-gradient(from 100deg,#d6dadd,#f1f3f4 12%,#bfc5c9 26%,#e8ebec 40%,#c9cfd3 54%,#f3f4f5 68%,#b9bfc4 82%,#d6dadd);
 box-shadow:inset 0 6px 10px rgba(40,50,60,.34),inset 0 -1px 2px rgba(255,255,255,.7),0 1px 1px rgba(255,255,255,.95),0 -1px 1px rgba(60,70,80,.38)}
/* soft reflections of a window, a faint highlight along the rim */
.th-thali .th-rf{position:absolute;inset:0;border-radius:50%;pointer-events:none;
 background:linear-gradient(118deg,rgba(255,255,255,0) 22%,rgba(255,255,255,.50) 36%,rgba(255,255,255,0) 50%),
  linear-gradient(118deg,rgba(255,255,255,0) 58%,rgba(255,255,255,.22) 66%,rgba(255,255,255,0) 74%)}
.th-thali .th-hl{position:absolute;inset:0;border-radius:50%;pointer-events:none;
 background:conic-gradient(from 214deg,rgba(255,255,255,0) 0deg,rgba(255,255,255,.95) 34deg,rgba(255,255,255,0) 92deg,rgba(255,255,255,0) 360deg);
 -webkit-mask:radial-gradient(farthest-side,transparent 91%,#000 93%,#000 98%,transparent 99.5%);mask:radial-gradient(farthest-side,transparent 91%,#000 93%,#000 98%,transparent 99.5%)}
.th-stage.th-ok .th-thali{box-shadow:0 0 0 2px rgba(222,182,96,.6),0 0 40px 6px rgba(232,186,92,.34),0 2px 3px rgba(40,30,20,.24),0 22px 26px -10px rgba(40,22,8,.36),0 50px 58px -28px rgba(40,22,8,.30),inset 0 0 0 1.5px rgba(70,78,86,.38),inset 0 2px 3px rgba(255,255,255,.95)}
.th-shine{position:absolute;overflow:hidden;border-radius:50%;pointer-events:none;z-index:9}
.th-shine::before{content:"";position:absolute;top:-12%;bottom:-12%;left:-45%;width:30%;opacity:0;
 background:linear-gradient(100deg,rgba(255,255,255,0),rgba(255,255,255,.85),rgba(255,255,255,0));transform:skewX(-18deg)}
.th-stage.th-shn .th-shine::before{animation:th-sweep 1.2s var(--th-spring) both}
@keyframes th-sweep{0%{transform:translateX(0) skewX(-18deg);opacity:0}15%{opacity:1}85%{opacity:1}100%{transform:translateX(560%) skewX(-18deg);opacity:0}}
.th-stage.th-glow .th-thali{animation:th-lift 1.1s var(--th-soft)}
@keyframes th-lift{0%{transform:scale(1)}35%{transform:scale(1.022)}100%{transform:scale(1)}}
.th-stage.th-wob .th-thali{animation:th-wob .3s var(--th-soft)}
@keyframes th-wob{0%{transform:scale(1)}40%{transform:scale(1.01)}100%{transform:scale(1)}}
.th-rip{position:absolute;width:26px;height:26px;margin:-13px 0 0 -13px;border-radius:50%;border:1.5px solid rgba(255,255,255,.9);box-shadow:0 0 0 1px rgba(184,134,47,.35);pointer-events:none;z-index:6}

/* a compartment: a steel katori, the open centre of the plate, or the side saucer */
.th-comp{position:absolute;border-radius:50%;cursor:pointer;z-index:2;-webkit-tap-highlight-color:transparent;transition:transform .35s var(--th-pop)}
.th-comp:active{transform:scale(.965)}
.th-comp .th-ring{position:absolute;inset:-8px;border-radius:50%;border:1.5px solid rgba(184,134,47,0);pointer-events:none;transform:scale(.95);transition:border-color .3s,box-shadow .35s,transform .45s var(--th-pop)}
.th-comp.th-act .th-ring{border-color:rgba(184,134,47,.8);box-shadow:0 0 16px rgba(226,178,85,.5);transform:scale(1)}
.th-comp.th-target .th-ring{border-color:rgba(184,134,47,.55);box-shadow:0 0 14px rgba(226,178,85,.35);animation:th-tg 1.1s ease-in-out infinite}
.th-comp.th-drop .th-ring{border-color:var(--th-sage);box-shadow:0 0 22px rgba(108,158,131,.65);transform:scale(1.07);animation:none}
@keyframes th-tg{50%{transform:scale(1.06);box-shadow:0 0 22px rgba(226,178,85,.55)}}
.th-kat{position:absolute;inset:0;border-radius:50%;
 background:conic-gradient(from 12deg,#e8ebed,#fdfdfd 11%,#b6bcc2 27%,#eef0f2 41%,#a8afb6 56%,#f6f7f8 70%,#c0c6cb 84%,#e8ebed);
 box-shadow:inset 0 1px 1px rgba(255,255,255,.85),0 0 0 1px rgba(80,90,100,.38),4px 7px 8px -2px rgba(30,24,18,.46),9px 15px 17px -7px rgba(30,24,18,.28)}
.th-comp.th-open .th-kat{background:none;box-shadow:none}
.th-comp.th-open .th-kat::after{content:"";position:absolute;inset:3%;border-radius:50%;background:rgba(80,90,100,.07);box-shadow:inset 0 4px 8px rgba(40,50,60,.30),inset 0 -1px 2px rgba(255,255,255,.8),0 1px 0 rgba(255,255,255,.7);border:1.5px dashed rgba(90,100,110,.35)}
.th-comp.th-open.th-full .th-kat::after{display:none}
.th-kat .th-in{position:absolute;inset:11.5%;border-radius:50%;overflow:hidden;
 background:radial-gradient(circle at 38% 28%,#d3d8db,#959da4 76%,#aeb5bb);
 box-shadow:0 1px 0 rgba(255,255,255,.85),0 -1px 1px rgba(60,70,80,.42)}
.th-kat .th-in::after{content:"";position:absolute;inset:0;border-radius:50%;pointer-events:none;box-shadow:inset 0 6px 9px rgba(30,40,50,.50),inset 0 -2px 3px rgba(255,255,255,.35);z-index:3}
.th-comp.th-sauc .th-kat .th-in{inset:9%}
.th-comp.th-open .th-kat .th-in{display:none}
.th-comp .th-lab{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;text-align:center;z-index:1;pointer-events:none;
 font-size:11.5px;font-weight:700;letter-spacing:.04em;color:rgba(55,66,76,.58);text-shadow:0 1px 0 rgba(255,255,255,.6);line-height:1.1;padding:0 6px}
.th-te .th-comp .th-lab{font-size:11px;letter-spacing:0}
/* the food: a top-down cut-out filling the compartment */
.th-food{position:absolute;left:50%;top:50%;width:var(--th-fw,125%);height:var(--th-fw,125%);margin:calc(var(--th-fw,125%) / -2) 0 0 calc(var(--th-fw,125%) / -2);z-index:2;
 background:center/contain no-repeat;transform:scale(var(--th-s,1));transition:transform .45s var(--th-pop);
 -webkit-mask-image:radial-gradient(closest-side,#000 76%,transparent 82%);mask-image:radial-gradient(closest-side,#000 76%,transparent 82%)}
.th-food.th-pic{background-size:cover}
.th-comp.th-open .th-food{filter:none}
.th-fwrap{position:absolute;inset:0;z-index:2;filter:drop-shadow(0 7px 5px rgba(40,24,10,.34))}
.th-comp:not(.th-open) .th-fwrap{filter:none}
.th-comp.th-open .th-fwrap .th-food{--th-fw:128%}
.th-comp.th-k .th-in .th-food{--th-fw:128%}
.th-comp.th-sauc .th-in .th-food{--th-fw:124%}
/* steam on the hot foods */
.th-steam{position:absolute;left:20%;right:20%;top:-6%;height:32px;pointer-events:none;z-index:5;opacity:.6;transition:opacity .8s}
.th-stage.th-ok .th-steam{opacity:1}
.th-steam i{position:absolute;bottom:0;width:7px;height:20px;border-radius:50%;
 background:linear-gradient(to top,rgba(255,255,255,0),rgba(255,255,255,.97));filter:blur(2.4px);animation:th-steam 2.8s ease-in infinite;opacity:0}
.th-steam i:nth-child(1){left:22%}.th-steam i:nth-child(2){left:46%;animation-delay:.9s}.th-steam i:nth-child(3){left:68%;animation-delay:1.8s}
@keyframes th-steam{0%{transform:translate(0,6px) scale(.7);opacity:0}25%{opacity:.9}60%{transform:translate(3px,-12px) scale(1,1.15)}100%{transform:translate(-2px,-30px) scale(1.5,1.2);opacity:0}}
.th-ghostc{position:absolute;left:0;top:0;width:150px;height:64px;border-radius:16px;background:center/cover no-repeat;z-index:40;pointer-events:none;will-change:transform;
 box-shadow:0 0 0 3px #fffdf9,0 22px 30px -10px rgba(60,28,8,.5)}
.th-ghostc.th-cut{background-color:#f6e6cf;background-size:contain}

/* ================= nutrition: four slim bars ================= */
.th-nut{display:grid;grid-template-columns:1fr 1fr;gap:11px 18px}
.th-nb{min-width:0}
.th-nb .th-t{display:flex;justify-content:space-between;align-items:baseline;gap:6px;font-size:12px;line-height:1.2}
.th-nb .th-t span{font-weight:600;color:var(--th-ink)}
.th-nb .th-t b{font-weight:600;color:var(--th-ink2);font-variant-numeric:tabular-nums;white-space:nowrap;transition:color .5s}
.th-nb .th-t b u{text-decoration:none;color:var(--th-mute);font-weight:500}
.th-nb .th-trk{height:5px;margin-top:6px;border-radius:5px;background:rgba(120,78,38,.12);overflow:hidden}
.th-nb .th-trk i{display:block;height:100%;width:100%;border-radius:5px;background:#cdbfb2;transform:scaleX(0);transform-origin:left;transition:transform .7s var(--th-soft),background-color .5s,box-shadow .5s}
.th-nb.th-s-low .th-trk i{background:var(--th-amber);box-shadow:0 0 6px rgba(217,153,43,.55)}
.th-nb.th-s-ok .th-trk i{background:var(--th-sage);box-shadow:0 0 6px rgba(108,158,131,.55)}
.th-nb.th-s-high .th-trk i{background:var(--th-coral);box-shadow:0 0 6px rgba(224,120,106,.55)}
.th-nb.th-s-low .th-t b{color:var(--th-amber-ink)}.th-nb.th-s-ok .th-t b{color:var(--th-sage-ink)}.th-nb.th-s-high .th-t b{color:var(--th-coral-ink)}
.th-te .th-nb .th-t{font-size:11.5px}

/* status text + the Sara approves seal */
.th-sp{display:flex;align-items:center;gap:8px;font-weight:600;font-size:13px;color:var(--th-mute);transition:color .5s;min-width:0}
.th-sp i{flex:none;width:7px;height:7px;border-radius:50%;background:#cdbfb2;font-size:0;transition:background .5s,box-shadow .5s}
.th-sp.th-s-low{color:var(--th-amber-ink)}.th-sp.th-s-low i{background:var(--th-amber);box-shadow:0 0 8px rgba(217,153,43,.7)}
.th-sp.th-s-ok{color:var(--th-sage-ink)}.th-sp.th-s-ok i{background:var(--th-sage);box-shadow:0 0 8px rgba(108,158,131,.7)}
.th-sp.th-s-high{color:var(--th-coral-ink)}.th-sp.th-s-high i{background:var(--th-coral);box-shadow:0 0 8px rgba(224,120,106,.7)}
.th-appr{flex:none;display:flex;align-items:center;gap:7px;padding:4px 13px 4px 4px;border-radius:30px;font-weight:700;font-size:12px;color:var(--th-gold-ink);transform:scale(0);opacity:0;transform-origin:right center;white-space:nowrap;
 border:1.5px solid transparent;background:linear-gradient(#fffaf0,#fbf0d8) padding-box,linear-gradient(135deg,#efd9a0,#b8862f 50%,#f0dca4) border-box;box-shadow:0 8px 16px -8px rgba(150,100,20,.55)}
.th-appr i{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;background:conic-gradient(from 200deg,#f3dc9c,#b8862f,#f6e5b4,#a9781f,#f3dc9c);box-shadow:inset 0 0 0 2px rgba(255,251,240,.85)}
.th-appr i svg{width:12px;height:12px}
.th-appr.th-on{transform:scale(1);opacity:1}
.th-appr:not(.th-on){display:none}

/* the one main action, and the quiet ones */
.th-prim{display:flex;align-items:center;justify-content:center;gap:12px;width:100%;min-height:46px;border:0;border-radius:30px;padding:0 8px 0 26px;position:relative;
 background:linear-gradient(135deg,#d45d22,#b4400f);color:#fff;font-weight:700;font-size:15px;cursor:pointer;
 box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 14px 24px -10px rgba(180,64,15,.65),0 2px 5px rgba(180,64,15,.25);transition:transform .3s var(--th-pop),background .5s,box-shadow .5s}
.th-prim .th-ar{flex:none;width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,.18);display:grid;place-items:center;transition:transform .4s var(--th-spring)}
.th-prim .th-ar svg{width:16px;height:16px}
.th-prim:hover .th-ar{transform:translate(2px,-1px) scale(1.06)}
.th-prim:active{transform:scale(.975)}
.th-prim.th-go{background:linear-gradient(135deg,#8f3b15,#6e2a0c);box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 0 0 1.5px rgba(214,174,92,.7),0 14px 24px -10px rgba(110,42,12,.65)}
.th-prim.th-go .th-ar{background:linear-gradient(135deg,#e6c987,#b8862f)}
.th-prim.th-go .th-ar svg{stroke:#4a2a05}
.th-qt{border:0;background:none;color:var(--th-sf-deep);font-weight:600;font-size:12.5px;line-height:1;padding:8px 6px;cursor:pointer}
.th-qt:disabled{color:#b6a89b;cursor:default}
.th-qt:not(:disabled):hover{text-decoration:underline;text-underline-offset:3px}

/* portion: a segmented control, no plus and minus buttons */
.th-seg{display:flex;padding:3px;border-radius:14px;background:rgba(120,78,38,.09);box-shadow:inset 0 1px 3px rgba(120,78,38,.14)}
.th-seg button{flex:1;min-width:0;border:0;background:none;border-radius:11px;padding:9px 0;font-weight:600;font-size:14px;color:var(--th-ink2);cursor:pointer;font-variant-numeric:tabular-nums;transition:background .25s,color .25s,box-shadow .25s,transform .2s var(--th-pop)}
.th-seg button:active{transform:scale(.94)}
.th-seg button.th-on{background:#fffdf9;color:var(--th-sf-deep);font-weight:700;box-shadow:0 4px 10px -3px rgba(100,50,15,.35),0 0 0 1px rgba(120,78,38,.06)}

/* header: the orange identity, deeper and calmer */
.th-top{position:relative;flex:none;height:90px;padding:38px 100px 0 22px;color:#fff;overflow:hidden;border-radius:0 0 30px 30px;z-index:5;
 background:radial-gradient(70% 140% at 88% 0%,rgba(255,190,130,.42),rgba(255,190,130,0) 60%),linear-gradient(118deg,#a2380e,#cb5a1c 58%,#e48a50 130%);
 box-shadow:0 16px 28px -18px rgba(150,50,10,.7),inset 0 -1px 0 rgba(255,255,255,.16)}
.th-wm{font:italic 700 25px/1 ThPF,Georgia,serif;white-space:nowrap;letter-spacing:.005em}
.th-sub{margin-top:6px;font-size:12.5px;font-weight:600;display:flex;align-items:center;gap:8px;white-space:nowrap}
.th-cond{padding:2px 10px;border-radius:20px;background:rgba(255,255,255,.18);box-shadow:inset 0 0 0 1px rgba(255,255,255,.4);font-size:11px;font-weight:600}
.th-bot{position:absolute;right:8px;bottom:0;height:80px;pointer-events:none}
/* meal tabs: one quiet segmented bar */
.th-tabs{flex:none;display:flex;margin:10px 14px 0;padding:3px;border-radius:18px;background:rgba(120,78,38,.08);box-shadow:inset 0 1px 3px rgba(120,78,38,.12)}
.th-tabs button{position:relative;flex:1;border:0;background:none;padding:8px 0 11px;border-radius:15px;color:var(--th-mute);font-weight:600;font-size:12.5px;line-height:1;cursor:pointer;transition:background .3s,color .3s,box-shadow .3s,transform .2s var(--th-pop)}
.th-te .th-tabs button{font-size:11.5px}
.th-tabs button:active{transform:scale(.95)}
.th-tabs button.th-on{background:#fffdf9;color:var(--th-sf-deep);font-weight:700;box-shadow:0 5px 12px -4px rgba(100,50,15,.35),0 0 0 1px rgba(120,78,38,.05)}
.th-tabs button i{position:absolute;left:50%;bottom:4px;width:4px;height:4px;margin-left:-2px;border-radius:50%;background:#d6cdc6;transition:background .4s,box-shadow .4s}
.th-tabs button i.th-s-low{background:var(--th-amber)}.th-tabs button i.th-s-ok{background:var(--th-sage)}.th-tabs button i.th-s-high{background:var(--th-coral)}
.th-view{flex:1;min-height:0;display:flex;flex-direction:column}
.th-view[hidden]{display:none}
.th-mh{display:flex;align-items:baseline;gap:8px;padding:11px 20px 0;height:30px}
.th-mh b{white-space:nowrap;font-size:19px;font-weight:700;color:var(--th-ink);letter-spacing:-.01em}
.th-te .th-mh b{font-size:17px}
.th-mh small{white-space:nowrap;font-size:12px;color:var(--th-mute);font-weight:500}
.th-src{margin-left:auto;border:0;background:none;padding:4px 2px;font-size:12px;font-weight:600;color:var(--th-mute);align-self:center;transition:color .3s;white-space:nowrap;cursor:default}
.th-src.th-own{color:var(--th-sf-deep);cursor:pointer}.th-src.th-own:hover{text-decoration:underline;text-underline-offset:3px}
.th-lg{align-self:center;display:flex;border-radius:12px;background:rgba(120,78,38,.09);padding:2px;cursor:pointer;margin-left:6px}
.th-lg span{padding:3px 8px;border-radius:10px;font-size:11px;font-weight:700;color:var(--th-mute);transition:background .25s,color .25s}
.th-lg span.th-on{background:#fffdf9;color:var(--th-sf-deep);box-shadow:0 3px 7px -2px rgba(100,50,15,.35)}
.th-lg span:last-child{font-size:11px}
.th-stagewrap{flex:none;display:flex;justify-content:center;margin-top:8px}
.th-stat{flex:none;display:flex;align-items:center;justify-content:space-between;gap:8px;margin:6px 20px 0;min-height:30px}
.th-sp span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.th-strip{flex:none;margin:6px 14px 0;padding:11px 18px 12px;border-radius:22px}
.th-nb .th-t b i{font-style:normal}
/* the bottom sheet: the food chooser, the one action, the quiet ones, the note */
.th-sheet{position:relative;flex:none;margin-top:auto;padding:9px 0 0;border-radius:32px 32px 0 0;background:rgba(255,252,247,.82);-webkit-backdrop-filter:blur(20px) saturate(1.3);backdrop-filter:blur(20px) saturate(1.3);
 box-shadow:inset 0 1px 0 #fff,0 -22px 40px -20px rgba(120,60,20,.38),0 -2px 6px rgba(120,60,20,.05);z-index:6}
.th-grab{width:36px;height:4px;border-radius:3px;background:rgba(120,78,38,.22);margin:0 auto 7px}
.th-sbody{display:grid}
.th-cs,.th-ps{grid-area:1/1;min-width:0;transition:opacity .28s var(--th-soft),transform .35s var(--th-spring)}
.th-ps{padding:0 18px;opacity:0;transform:translateY(14px);pointer-events:none;visibility:hidden;transition:opacity .28s var(--th-soft),transform .35s var(--th-spring),visibility 0s .35s}
.th-sheet.th-pop .th-ps{opacity:1;transform:none;pointer-events:auto;visibility:visible;transition:opacity .28s var(--th-soft),transform .35s var(--th-spring)}
.th-sheet.th-pop .th-cs{opacity:0;transform:translateY(-8px);pointer-events:none}
.th-th{display:flex;align-items:baseline;justify-content:space-between;gap:10px;padding:0 20px}
.th-th b{font-size:14.5px;font-weight:700;color:var(--th-ink);white-space:nowrap}
.th-th small{font-size:11.5px;color:var(--th-mute);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.th-cards{display:flex;gap:11px;overflow-x:auto;scroll-snap-type:x proximity;padding:9px 20px 11px;margin-top:0;scrollbar-width:none;
 -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 16px,#000 calc(100% - 26px),transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 16px,#000 calc(100% - 26px),transparent 100%)}
.th-cards::-webkit-scrollbar{display:none}
.th-card{flex:none;width:150px;scroll-snap-align:start;border-radius:20px;background:#fffdf9;overflow:hidden;cursor:grab;touch-action:pan-x;position:relative;
 box-shadow:0 0 0 1px rgba(120,78,38,.06),0 14px 24px -14px rgba(100,50,15,.45),0 2px 4px rgba(100,50,15,.07);transition:transform .35s var(--th-pop),box-shadow .35s}
.th-card:active{transform:scale(.97)}
.th-card.th-in{box-shadow:0 0 0 1.5px rgba(184,134,47,.85),0 14px 24px -14px rgba(150,100,20,.55)}
.th-card .th-ph{height:64px;background:#f1e3d0 center 58%/cover no-repeat}
.th-card .th-ph.th-cut{background:radial-gradient(70% 90% at 50% 40%,#fff6e8,#f2dfc6);position:relative}
.th-card .th-bd{padding:8px 13px 0}
.th-card .th-nm{font-size:13px;font-weight:700;color:var(--th-ink);line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.th-card .th-mt{font-size:11px;color:var(--th-mute);margin-top:2px;white-space:nowrap}
.th-card .th-ad{margin-top:5px;border-top:1px solid var(--th-hair);display:flex}
.th-card .th-add{flex:1;border:0;background:none;padding:7px 0 8px;font-weight:700;font-size:12.5px;color:var(--th-sf-deep);cursor:pointer;letter-spacing:.01em;transition:background .2s}
.th-card .th-add:hover{background:var(--th-sf-wash)}
.th-card .th-add:disabled{color:var(--th-gold-ink);cursor:default;background:none}
.th-card.th-pop{animation:th-cin .38s var(--th-spring) backwards}
@keyframes th-cin{from{opacity:0;transform:translateY(12px) scale(.96)}}
.th-hint{display:flex;gap:6px;align-items:center;padding:0 20px;font-size:11px;color:var(--th-mute);line-height:1.3;min-height:15px}
.th-hint svg{flex:none;width:11px;height:11px}
/* the portion sheet */
.th-psh{display:flex;align-items:center;gap:12px}
.th-pph{flex:none;width:54px;height:54px;border-radius:15px;background:#f1e3d0 center/cover no-repeat;box-shadow:0 8px 14px -8px rgba(100,50,15,.5)}
.th-pph.th-cut{background-color:#f6e6cf;background-size:contain}
.th-psn{min-width:0;flex:1}
.th-psn b{display:block;font-size:15.5px;font-weight:700;color:var(--th-ink);line-height:1.2}
.th-psn small{display:block;font-size:12.5px;color:var(--th-mute);margin-top:2px}
.th-psw{margin:11px 0 12px;font-size:12.5px;line-height:1.45;color:var(--th-ink2);min-height:36px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.th-psu{text-align:center;font-size:11.5px;color:var(--th-mute);margin-top:8px}
.th-chg{display:block;margin:2px auto 0}
.th-acts{flex:none;padding:6px 18px 0;display:flex;align-items:center;gap:4px}
.th-acts .th-prim{flex:1}.th-acts .th-cl{flex:none;padding:8px 8px}
.th-foot{flex:none;padding:7px 22px 15px;background:rgba(255,252,247,.82);font-size:11.5px;line-height:1.45;color:var(--th-ink2);text-align:center;position:relative;z-index:6}
.th-foot::before{content:"";display:block;width:34px;height:1.5px;margin:0 auto 6px;border-radius:2px;background:linear-gradient(90deg,transparent,var(--th-gold),transparent)}
.th-foot s{display:block;text-decoration:none;color:var(--th-mute);font-size:11px;margin-bottom:3px}
/* the day view */
.th-dv{padding:14px 18px 0;overflow:hidden}
.th-dv h3{margin:0 2px 12px;font-size:21px;font-weight:700;letter-spacing:-.01em}.th-dv h3 small{display:block;font-size:12.5px;font-weight:500;color:var(--th-mute);margin-top:2px;letter-spacing:0}
.th-dhero{border-radius:24px;padding:18px 20px 20px}
.th-dhero .th-nut{grid-template-columns:1fr;gap:16px}
.th-dhero .th-nb .th-t{font-size:13px}.th-dhero .th-nb .th-trk{height:7px;margin-top:8px}.th-dhero .th-nb:first-child .th-trk{height:9px}
.th-dhero .th-nb:first-child .th-t span{font-size:15px;font-weight:700}
.th-dv .th-stat{margin:14px 2px 0}
.th-dm{display:grid;gap:8px;margin-top:14px}
.th-dm div{display:flex;align-items:center;gap:8px;padding:9px 14px;border-radius:18px;background:rgba(255,253,249,.75);box-shadow:0 10px 20px -14px rgba(100,50,15,.4),inset 0 1px 0 #fff;font-size:13px;font-weight:600}
.th-dm .th-nmm{width:66px;flex:none}
.th-dm .th-th2{display:flex;gap:3px}.th-dm .th-th2 i{width:22px;height:22px;border-radius:7px;background:#f6e6cf center/contain no-repeat;box-shadow:0 5px 8px -4px rgba(60,28,8,.4)}
.th-dm .th-th2 i.th-ph{background-size:cover}
.th-dm em{margin-left:auto;font-style:normal;font-weight:700;color:var(--th-ink2);white-space:nowrap}
.th-dm .th-dot{width:7px;height:7px;border-radius:50%;background:#d6cdc6;padding:0;flex:none}.th-dm .th-dot.th-s-low{background:var(--th-amber)}.th-dm .th-dot.th-s-ok{background:var(--th-sage)}.th-dm .th-dot.th-s-high{background:var(--th-coral)}
.th-dx{margin-top:12px;font-size:12px;color:var(--th-mute);padding:0 4px;line-height:1.45}
/* ---- the way back, and the screens that are not the plate ---- */
.th-back{position:absolute;left:12px;top:34px;z-index:7;width:34px;height:34px;border-radius:50%;border:0;padding:0;cursor:pointer;color:#fff;
 background:rgba(255,255,255,.18);box-shadow:inset 0 0 0 1px rgba(255,255,255,.42);display:grid;place-items:center;transition:transform .25s var(--th-pop),background .25s}
.th-back:active{transform:scale(.9)}
.th-back svg{width:16px;height:16px}
.th-top{padding-left:56px}
.th-offline{position:relative;z-index:8;margin:8px 14px 0;padding:8px 14px;border-radius:14px;background:#fff1d6;color:var(--th-amber-ink);font-weight:600;font-size:12px;line-height:1.35;
 box-shadow:0 0 0 1px rgba(217,153,43,.4)}
.th-state{margin:26px 18px 0;padding:26px 22px 22px;border-radius:26px;text-align:center}
.th-state h3{font-size:18px;font-weight:700;letter-spacing:-.01em}
.th-state p{margin:8px auto 16px;max-width:290px;font-size:13px;line-height:1.5;color:var(--th-ink2)}
.th-state .th-prim{max-width:260px;margin:0 auto}
.th-skel{margin:26px 18px 0}
.th-skel i{display:block;border-radius:22px;background:linear-gradient(100deg,rgba(120,78,38,.07) 30%,rgba(255,255,255,.7) 50%,rgba(120,78,38,.07) 70%);background-size:220% 100%;animation:th-pulse 1.3s linear infinite}
.th-skel i:nth-child(1){height:40px}.th-skel i:nth-child(2){height:261px;margin:16px auto 0;width:311px;max-width:100%;border-radius:50%}.th-skel i:nth-child(3){height:90px;margin-top:16px}
@keyframes th-pulse{to{background-position:-220% 0}}
.th-none{padding:18px 20px 6px;text-align:center;font-size:12.5px;line-height:1.5;color:var(--th-ink2)}
.th-none b{display:block;font-size:14px;color:var(--th-ink);margin-bottom:2px}
.th-ast:empty{display:none}
.th-got{display:inline-block;margin-left:6px;color:var(--th-gold);font-weight:800}
.th-dx b{color:var(--th-ink2);font-weight:600}
.th-src2{margin-top:10px;text-align:center;font-size:10.5px;color:var(--th-mute);line-height:1.4}
/* the card on Today that opens it */
.th-entry{display:flex;align-items:center;gap:12px;width:100%;margin:14px 0;padding:12px 14px 12px 12px;border:0;border-radius:24px;text-align:left;cursor:pointer;color:#fff;
 background:radial-gradient(70% 140% at 88% 0%,rgba(255,190,130,.42),rgba(255,190,130,0) 60%),linear-gradient(118deg,#a2380e,#cb5a1c 58%,#e48a50 130%);
 box-shadow:0 16px 28px -16px rgba(150,50,10,.7),inset 0 1px 0 rgba(255,255,255,.25);font-family:inherit}
.th-entry:active{transform:scale(.985)}
.th-entry .th-ent-pl{flex:none;width:54px;height:54px;border-radius:50%;background:linear-gradient(145deg,#f4f5f6,#c6cbcf);box-shadow:inset 0 0 0 1.5px rgba(70,78,86,.35),0 6px 10px -4px rgba(60,28,8,.5);display:grid;place-items:center;overflow:hidden}
.th-entry .th-ent-pl i{display:block;width:100%;height:100%;background:center/cover no-repeat}
.th-entry .th-ent-t{flex:1;min-width:0}
.th-entry .th-ent-t b{display:block;font-size:15px;font-weight:700;line-height:1.2}
.th-entry .th-ent-t small{display:block;margin-top:2px;font-size:12px;font-weight:500;opacity:.9;line-height:1.3}
.th-entry .th-ent-go{flex:none;width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,.2);display:grid;place-items:center}
.th-entry .th-ent-go svg{width:16px;height:16px}
.th-entry .th-ent-badge{display:inline-block;margin-left:6px;padding:1px 8px;border-radius:10px;background:rgba(255,255,255,.22);font-size:10.5px;font-weight:700}

/* a narrow phone: the stage stays 311 wide, the sheet keeps its edges */
@media (max-width:340px){.th-root{font-size:12.5px}.th-tabs button{font-size:11.5px}.th-cards{padding-left:14px;padding-right:14px}}

/* card pictures are real <img>s so a slow phone can load them lazily */
.th-card .th-ph{position:relative;overflow:hidden}
.th-ph .th-phi{-webkit-user-drag:none;user-select:none;position:absolute;left:0;top:0;width:100%;height:100%;object-fit:cover;object-position:center 58%}
.th-ph .th-phc{left:0;top:3px;height:calc(100% - 5px);object-fit:contain;object-position:center;filter:drop-shadow(0 6px 5px rgba(60,28,8,.3))}
.th-ph.th-cut{background:radial-gradient(70% 90% at 50% 40%,#fff6e8,#f2dfc6)}
.th-ph.th-notile{display:grid;place-items:center;padding:6px 8px;text-align:center;font-size:11.5px;font-weight:700;line-height:1.2;color:var(--th-sf-deep)}
/* a food with no picture yet: the warm tile with its name */
.th-food.th-tile{display:grid;place-items:center;text-align:center;font-size:10.5px;font-weight:700;line-height:1.15;color:var(--th-sf-deep);background:radial-gradient(70% 90% at 50% 40%,#fff6e8,#f2dfc6);border-radius:50%;
 -webkit-mask-image:none;mask-image:none;padding:8%}
/* inside the Aahaar app's own frame (.aa): this screen owns the whole phone, on its own warm field - no blue field behind it */
.aa.th-host{padding:0 0 env(safe-area-inset-bottom)}
.aa.th-host::before{display:none}
.aa.th-host .th-root button:active{transform:none}
.th-top{height:calc(90px + env(safe-area-inset-top));padding-top:calc(38px + env(safe-area-inset-top))}
.th-back{top:calc(34px + env(safe-area-inset-top))}
.th-offline[hidden]{display:none}

/* the Aahaar app's own `.aa button { color: inherit }` is stronger than a single class: say the colours again, one step stronger */
.aa .th-root .th-prim,.aa .th-root .th-back,.aa button.th-entry{color:#fff}
.aa .th-root .th-qt{color:var(--th-sf-deep)}.aa .th-root .th-qt:disabled{color:#b6a89b}
.aa .th-root .th-tabs button{color:var(--th-mute)}.aa .th-root .th-tabs button.th-on{color:var(--th-sf-deep)}
.aa .th-root .th-seg button{color:var(--th-ink2)}.aa .th-root .th-seg button.th-on{color:var(--th-sf-deep)}
.aa .th-root .th-card .th-add{color:var(--th-sf-deep)}.aa .th-root .th-card .th-add:disabled{color:var(--th-gold-ink)}
.aa .th-root .th-src{color:var(--th-mute)}.aa .th-root .th-src.th-own{color:var(--th-sf-deep)}

/* Reduced motion: NO flights, ripples, wobbles, sweeps, steam, count-ups, bar animations, entrances or pulses - the end state at once. */
@media (prefers-reduced-motion:reduce){
 .th-steam i{animation:none;opacity:.5;transform:translateY(-12px)}
 .th-stage.th-glow .th-thali,.th-stage.th-wob .th-thali,.th-comp.th-target .th-ring{animation:none}
 .th-stage.th-shn .th-shine::before{animation:none;opacity:0}
 .th-card.th-pop,.th-skel i{animation:none}
 .th-food,.th-comp,.th-comp .th-ring,.th-thali,.th-nb .th-trk i,.th-nb .th-t b,.th-prim,.th-prim .th-ar,.th-seg button,.th-tabs button,.th-card,.th-back,.th-entry,
 .th-cs,.th-ps,.th-sheet.th-pop .th-ps,.th-sp,.th-sp i,.th-qt,.th-src,.th-lg span{transition:none}
}