/* The restored hospital menus as "choose any one" tiles on Today and My plan (js/menus.js, js/screens/today.js, myplan.js). New look: cream page, a coloured card per meal time
   with a strong colour chip header, white option tiles with a soft shadow, a coloured kcal pill and small coloured nutrient chips, the chosen tile ringed in orange with a filled tick.
   Meal-time colours: universal/MENUS-RENDER-CONTRACT.md section 7 (tint = card, ink = text on the tint) plus a stronger colour for the chip header (dark text on every colour).
   Nothing under 11 px (13 px in Telugu). Nothing here is blue. */
:root{
  --mk-early:#FFC857; --mk-early-t:#FFF3D1; --mk-early-i:#4A2C00;
  --mk-breakfast:#FFB36B; --mk-breakfast-t:#FFE6D2; --mk-breakfast-i:#5A2000;
  --mk-mid-morning:#7ED3A5; --mk-mid-morning-t:#DDF3E0; --mk-mid-morning-i:#0C3A20;
  --mk-lunch:#FF8D5A; --mk-lunch-t:#FFD9C7; --mk-lunch-i:#4A1400;
  --mk-evening:#FF9FA8; --mk-evening-t:#F6DCEB; --mk-evening-i:#4B0D27;
  --mk-dinner:#5FD0C7; --mk-dinner-t:#D5F0EE; --mk-dinner-i:#053532;
  --mk-snack:#F3E27A; --mk-snack-t:#F8F1C9; --mk-snack-i:#403600;
}
.mk-early-morning{--mk:var(--mk-early);--mk-t:var(--mk-early-t);--mk-i:var(--mk-early-i);--mk-ink:#5C3A00}
.mk-breakfast{--mk:var(--mk-breakfast);--mk-t:var(--mk-breakfast-t);--mk-i:var(--mk-breakfast-i);--mk-ink:#7A2E00}
.mk-mid-morning{--mk:var(--mk-mid-morning);--mk-t:var(--mk-mid-morning-t);--mk-i:var(--mk-mid-morning-i);--mk-ink:#14532D}
.mk-lunch{--mk:var(--mk-lunch);--mk-t:var(--mk-lunch-t);--mk-i:var(--mk-lunch-i);--mk-ink:#7C2400}
.mk-evening{--mk:var(--mk-evening);--mk-t:var(--mk-evening-t);--mk-i:var(--mk-evening-i);--mk-ink:#6B1245}
.mk-dinner{--mk:var(--mk-dinner);--mk-t:var(--mk-dinner-t);--mk-i:var(--mk-dinner-i);--mk-ink:#0B4A47}
.mk-snack{--mk:var(--mk-snack);--mk-t:var(--mk-snack-t);--mk-i:var(--mk-snack-i);--mk-ink:#4A4400}

/* the round meal chips under the title (Today) */
.mchips{display:flex;gap:4px;margin:12px 14px 0;padding:8px 2px 6px;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.mchips::-webkit-scrollbar{display:none}
.mcp{flex:1 0 54px;min-width:54px;display:flex;flex-direction:column;align-items:center;gap:6px;padding:0;background:none;border:0;font:inherit;color:var(--text);text-align:center;cursor:pointer}
.mcp .ph{position:relative;width:52px;height:52px;border-radius:50%;background:#fff;box-shadow:var(--sh);display:flex;align-items:center;justify-content:center;transition:box-shadow .25s var(--ease),transform .25s var(--ease)}
.mcp .ph img{width:46px;height:46px;border-radius:50%;object-fit:cover;filter:drop-shadow(0 3px 3px rgba(90,45,10,.22))}
.mcp .ph img.ic{object-fit:contain;padding:6px;filter:none;background:var(--mk-t)}
.mcp.nx .ph{box-shadow:0 0 0 3px var(--accent);transform:scale(1.06)}
.mcp.eaten .ph::after{content:"";position:absolute;right:-4px;top:-4px;width:20px;height:20px;border-radius:50%;background:#1E8A4C url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.5 10.5l3 3 6-6.5' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/20px no-repeat;box-shadow:0 0 0 2px #fff}
.mcp b{font-size:11px;font-weight:600;line-height:1.15;max-width:60px;overflow-wrap:anywhere}
.mcp.nx b{color:var(--atext);font-weight:700}
.mcp .tm{font-style:normal;font-size:11px;line-height:1.1;color:var(--muted);white-space:nowrap}

/* stage chips: acute and surgical plans */
.mstg{margin:14px 0 0}
.mstl{margin:0 18px 6px;font-size:13px;font-weight:600;color:var(--text)}
.mstc{display:flex;gap:8px;padding:2px 14px 6px;overflow-x:auto;scrollbar-width:none}
.mstc::-webkit-scrollbar{display:none}
.ms{flex:none;min-height:40px;padding:0 16px;border-radius:20px;background:#fff;color:var(--text);box-shadow:0 0 0 2px var(--border-in) inset;font-size:13px;font-weight:600;white-space:nowrap}
.ms.on{background:var(--strong);color:#fff;box-shadow:var(--sh-btn)}

/* a meal time card */
.mc{margin:12px 14px 0;padding:12px 12px 14px;border-radius:26px;background:var(--mk-t);box-shadow:var(--sh);scroll-margin-top:12px}
.mch{display:flex;align-items:center;gap:10px}
.mcc{display:inline-flex;align-items:center;gap:8px;min-height:42px;max-width:100%;padding:4px 16px 4px 6px;border-radius:21px;background:var(--mk);color:var(--mk-i);box-shadow:0 8px 14px -10px rgba(90,40,0,.6)}
.mcc img{width:32px;height:32px;flex:none;filter:drop-shadow(0 2px 2px rgba(60,20,0,.25))}
.mcc b{font-size:15px;font-weight:700;line-height:1.15}
.mcc span{font-size:12.5px;font-weight:600;line-height:1.15}
.mch .tk2{margin-left:auto;background:#fff}
.mch .tk2.on{background:var(--accent)}
.mcl{margin:10px 4px 7px;font-size:12.5px;font-weight:700;letter-spacing:.02em;color:var(--mk-ink)}
.mcl.add{margin-top:14px}
.mcg{display:flex;flex-direction:column;gap:9px}
.mcn{margin:10px 4px 4px;font-size:13px;line-height:1.4;font-weight:600;color:var(--mk-ink)}
.mcs{margin:10px 4px 0;padding:0 0 0 16px;font-size:12px;line-height:1.45;color:var(--mk-ink)}
.mcs li{margin-top:2px}

/* an option tile */
.mot{position:relative;display:flex;align-items:center;gap:12px;min-height:88px;padding:10px 12px 10px 10px;border-radius:20px;background:#fff;color:var(--text);box-shadow:0 1px 2px rgba(60,30,10,.06),0 12px 18px -14px rgba(120,60,20,.45);cursor:pointer;transition:box-shadow .25s var(--ease),transform .25s var(--ease);-webkit-tap-highlight-color:transparent}
.mot:active{transform:scale(.985)}
.mot:focus-visible{outline:3px solid var(--strong);outline-offset:2px}
.mot.on{box-shadow:0 0 0 2.5px var(--accent),0 12px 18px -12px rgba(214,76,0,.6)}
.mop{width:72px;height:72px;border-radius:20px;flex:none;display:flex;align-items:center;justify-content:center;overflow:hidden;background:var(--mk-t)}
.mop-img{width:64px;height:64px;object-fit:contain;filter:drop-shadow(0 4px 4px rgba(90,45,10,.24))}
.mop-img.ic{width:46px;height:46px;filter:none}
.mob{flex:1;min-width:0}
.mon{font-size:14.5px;font-weight:600;line-height:1.28;overflow-wrap:anywhere}
.mon .vmark{margin-right:2px}
.moa{margin-top:2px;font-size:12px;line-height:1.35;color:var(--muted);overflow-wrap:anywhere}
.mor{display:flex;flex-wrap:wrap;gap:4px;margin-top:6px}
.mono{margin-top:5px;font-size:11.5px;line-height:1.3;color:var(--muted)}
.mok{display:inline-flex;align-items:center;gap:3px;min-height:22px;padding:2px 9px;border-radius:11px;background:#FFE3A6;color:#4A2C00;font-size:11.5px;font-weight:600;white-space:nowrap}
.mok b{font-weight:700}
.nc{display:inline-flex;align-items:center;gap:3px;min-height:22px;padding:2px 7px 2px 4px;border-radius:9px;font-size:11.5px;font-weight:700;white-space:nowrap}
.nc img{width:16px;height:16px;object-fit:contain;flex:none}
.nc b{font-weight:700}
.nc small{font-size:11px;font-weight:600;margin-left:1px}
.nc.n-protein{background:#CBEBD9;color:#0C3A20}
.nc.n-carbs{background:#FFE8A0;color:#4A3200}
.nc.n-fat{background:#FBD1D4;color:#5A0E16}
.nc.n-fibre{background:#DDEBB4;color:#2C3B05}
.mpb{position:relative;width:44px;height:44px;flex:none;padding:0;margin:-4px;border:0;border-radius:50%;background:none;display:flex;align-items:center;justify-content:center;cursor:pointer;-webkit-tap-highlight-color:transparent}   /* 44 x 44 tap area; the circle you see is .mpv (36 px) */
.mpv{position:relative;display:block;width:36px;height:36px;border-radius:50%;border:2.5px solid var(--strong);background:#fff;transition:background .2s var(--ease),transform .25s var(--ease)}
.mpv::before,.mpv::after{content:"";position:absolute;left:50%;top:50%;background:var(--strong);border-radius:2px}
.mpv::before{width:14px;height:2.5px;margin:-1.25px 0 0 -7px}
.mpv::after{width:2.5px;height:14px;margin:-7px 0 0 -1.25px}
.mpb.on .mpv{background:var(--strong);transform:scale(1.04)}
.mpb.on .mpv::before{width:7px;height:13px;margin:-8px 0 0 -3.5px;background:none;border:solid #fff;border-width:0 3px 3px 0;border-radius:0;transform:rotate(40deg)}
.mpb.on .mpv::after{display:none}

/* "one example day" link and its sheet */
.mexl{display:flex;align-items:center;justify-content:center;margin:6px 14px 0;min-height:44px;font-size:14px;font-weight:600;color:var(--atext);text-decoration:underline}
.mexp{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:8px;font-size:14px;font-weight:600}
.mexp .lnk{width:44px;height:44px;font-size:26px;line-height:1}
.mexp .lnk:disabled{opacity:.35}
.mexm{margin:0 0 12px}
.mexm b{font-size:13px;font-weight:600;color:var(--atext)}
.mexm p{margin:2px 0 0;font-size:14px;line-height:1.4}

/* My plan: the Eat / A little / Avoid cards carry their 3D verdict icon */
.mpqh .vi{width:32px;height:32px;flex:none;object-fit:contain;filter:drop-shadow(0 3px 3px rgba(60,30,10,.2))}

/* Telugu: NTR has one weight; nothing under 13 px */
html.te :is(.mcc span,.mcl,.moa,.mok,.nc,.nc small,.mono,.mcn,.mcs,.ms,.mstl,.mcp b,.mcp .tm,.mexm b,.mexm p,.mexp,.mexl){font-size:13px}
html.te :is(.mon,.mcc b){font-size:14.5px}
html.te :is(.mon,.mcc b,.mcl,.ms,.mcn,.mexl){-webkit-text-stroke:var(--tes,.4px) currentColor}
@media (max-width:340px){
  .mc{margin-left:10px;margin-right:10px;padding:10px 8px 12px}
  .mot{gap:9px;padding:8px}
  .mop{width:60px;height:60px;border-radius:17px}.mop-img{width:54px;height:54px}
  .mpv{width:32px;height:32px}
}
@media (prefers-reduced-motion:reduce){.mot,.mpv,.mcp .ph{transition:none}.mot:active{transform:none}}

/* ---- a meal with two or more dishes: a swipeable row of cards (Swiggy / Zomato style); only this row scrolls sideways ---- */
.mcr{display:flex;gap:12px;margin:0 -12px;padding:4px 12px 14px;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scroll-padding:0 12px;scrollbar-width:none;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain}
.mcr::-webkit-scrollbar{display:none}
.mcd{flex:0 0 150px;width:150px;box-sizing:border-box;scroll-snap-align:start;display:flex;flex-direction:column;align-items:stretch;gap:8px;min-height:0;padding:8px 8px 10px;border-radius:22px}
.mcd .mop{position:relative;width:100%;height:auto;aspect-ratio:1/1;border-radius:20px;overflow:visible}
.mcd .mop-img{width:86%;height:86%;border-radius:0}
.mcd .mop-img.ic{width:56px;height:56px}
.mcd .mob{flex:1;padding:0 2px}
.mcd .mon{font-size:14px;line-height:1.25;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.mcd .moa{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.mcd .mor{margin-top:5px}
/* the + sits on the photo's bottom-right corner: white circle, orange +; picked = filled orange circle with a white tick */
.mcd .mpb{position:absolute;right:3px;bottom:3px;margin:0}
.mcd .mpv{width:38px;height:38px;border:0;background:#fff;box-shadow:0 4px 10px -2px rgba(60,30,10,.35),0 0 0 1px var(--card-line)}
.mcd .mpb.on .mpv{background:var(--fill);box-shadow:0 4px 10px -2px rgba(234,94,10,.6)}
.mcd:focus-within{outline:3px solid var(--strong);outline-offset:1px}
.mpb:focus-visible{outline:3px solid var(--strong);outline-offset:2px}
@media (max-width:340px){
  .mcr{margin:0 -8px;padding:4px 8px 12px;scroll-padding:0 8px;gap:10px}
  .mcd{flex-basis:148px;width:148px}
}
html.te .mcd .mon{font-size:14px;line-height:1.3}
@media (prefers-reduced-motion:reduce){.mcr{scroll-behavior:auto}}

/* the dish name and photo open the dish's page where it has one; the rest of the card does nothing (a swipe never picks a dish) */
.mon a{color:inherit;text-decoration:underline;text-decoration-color:var(--fill);text-decoration-thickness:2px;text-underline-offset:2px}
.mop-a{display:flex;align-items:center;justify-content:center;width:100%;height:100%;border-radius:inherit}
.mot{cursor:default}
.mot:not(.mcd){padding-right:14px}