/* Build plate: the leaf stage. Ported from the owner-approved leaf-thali-v5 demo; the seal is a refined flat pill.
   The page layout around it (leaf box, tiles, shelf) is in screens.css. */
.pl .pstage{position:absolute;top:0;left:0;width:390px;height:342px;transform-origin:0 0;perspective:1100px;perspective-origin:50% 36%}
/* ---------- the leaf stage (ported from leaf-thali-v5) ---------- */
.pstage .stagebg{position:absolute;inset:0;pointer-events:none}
.pstage .glow{position:absolute;left:-40px;top:34px;width:470px;height:340px;opacity:0;pointer-events:none;
  background:radial-gradient(closest-side at 50% 52%,rgba(255,200,70,.9) 0%,rgba(255,185,60,.5) 45%,rgba(255,190,70,0) 100%)}
.pstage .leafshadow{position:absolute;left:30px;top:268px;width:330px;height:46px;pointer-events:none;background:radial-gradient(closest-side,rgba(70,38,8,.50),rgba(70,38,8,0));filter:blur(7px)}
.pstage .plane{position:absolute;left:12px;top:66px;width:366px;height:253px;transform-style:preserve-3d;transform:rotateX(21deg);transform-origin:50% 52%}
.pstage .plane>img.leaf{position:absolute;inset:0;width:100%;height:100%;display:block;filter:drop-shadow(0 5px 5px rgba(60,40,10,.35))}
.pstage .food{position:absolute;transform-style:preserve-3d;pointer-events:none}
.pstage .food .sh{position:absolute;left:-25%;top:-25%;width:150%;height:150%;pointer-events:none;
  background:radial-gradient(closest-side,rgba(0,6,0,.95) 58%,rgba(0,6,0,0) 100%) 69% 74%/76% 76% no-repeat,radial-gradient(closest-side,rgba(0,6,0,.55) 50%,rgba(0,6,0,0) 100%) 50% 50%/90% 90% no-repeat;opacity:0;transform-origin:50% 50%}
.pstage .food .sp{position:absolute;inset:0;opacity:0;transform-origin:50% 55%;will-change:transform}
.pstage .food .sp img{width:100%;height:100%;display:block;user-select:none;-webkit-user-drag:none;max-width:none;outline:none;border-radius:0}
.pstage .food.rice .sp img{filter:drop-shadow(0 1.5px 1.5px rgba(40,30,10,.25))}
.pstage .food.chap .sp img{filter:drop-shadow(0 1.5px 1px rgba(40,25,5,.45))}
.pstage .clipw{position:absolute;opacity:0;pointer-events:none;
  -webkit-mask-image:radial-gradient(ellipse 50% 44% at 50% 68%,#000 50%,transparent 100%),radial-gradient(ellipse 78% 48% at 55% 12%,#000 38%,transparent 100%);-webkit-mask-composite:source-over;
  mask-image:radial-gradient(ellipse 50% 44% at 50% 68%,#000 50%,transparent 100%),radial-gradient(ellipse 78% 48% at 55% 12%,#000 38%,transparent 100%);mask-composite:add}
.pstage .clipw video{position:absolute;inset:0;width:100%;height:100%;object-fit:fill;display:block}
.pstage img.clipstill{position:absolute;opacity:0;max-width:none !important;filter:none !important;outline:none}
.pstage .steamclip{position:absolute;pointer-events:none;opacity:0;z-index:5;filter:blur(2px);object-fit:fill;transform-origin:50% 100%;
  -webkit-mask-image:radial-gradient(ellipse 50% 50% at 50% 55%,#000 35%,transparent 100%);mask-image:radial-gradient(ellipse 50% 50% at 50% 55%,#000 35%,transparent 100%)}
.pstage .food.curry .sp{opacity:1;transform-style:preserve-3d}
.pstage .food.curry .sp>img{position:absolute;opacity:0;transform-origin:50% 50%;will-change:transform}
.pstage .food.curry .sp>img.piece{filter:drop-shadow(0 1.2px 1.4px rgba(30,0,10,.6))}
.pstage .anc{position:absolute;left:50%;top:50%;width:1px;height:1px}
.pstage .fx{position:absolute;inset:0;pointer-events:none;z-index:6}

/* the "approves" seal: flat pill, one thin gold ring around a check, one line of text. No gradient, no foil. */
.pstage .seal{position:absolute;right:14px;top:14px;height:32px;padding:0 13px 0 4px;display:flex;align-items:center;gap:8px;opacity:0;border-radius:999px;
  background:var(--seal-bg);box-shadow:inset 0 0 0 1px var(--seal-ring);color:var(--seal-ink);font-size:13px;font-weight:600;letter-spacing:-.005em;white-space:nowrap}
.pstage .seal-ic{width:24px;height:24px;border-radius:50%;box-shadow:inset 0 0 0 1.5px var(--seal-ring);display:grid;place-items:center;color:var(--seal-mark)}
.pstage .seal-ic svg{width:13px;height:13px}
.pstage .seal-shine{display:none}
.pl .pstage .seal{top:86px;right:26px}

/* =====================================================================================================================================================
   BUILD MY PLATE, REDO (30 Oct 2026). Every selector starts with .pl.page so it wins over the older plate rules in screens.css / nutrients.css / theme.css / bold.css
   (plate.css is linked before them). Rules: white page, orange only for the selected box / the ticks / the one primary button, dark letters, no wasted space,
   the "Sara approves" seal and the tip are pills BELOW the photo (the engine's own seal over the food is hidden), no steam.
   ===================================================================================================================================================== */
.pl.page{padding-bottom:12px}
section.pl.page{padding-bottom:12px}
.pl.page .pstage .seal{display:none}
.pl.page .pstage .glow{display:none}   /* the warm halo behind the leaf looked like a beige frame on the white page */

/* Breakfast | Lunch: two equal boxes, 48 px high, chosen = light tint + orange border */
.pl.page .mswrap{display:block;margin:4px 14px 0}
.pl.page .msw{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:8px;padding:0;background:none;box-shadow:none;border-radius:0}
.pl.page .msw button{display:flex;align-items:center;justify-content:center;height:48px;min-height:48px;padding:0 8px;border-radius:14px;background:#fff;color:var(--b-ink);font-size:16px;font-weight:500;box-shadow:0 0 0 1px var(--line);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pl.page .msw button.on{background:var(--sel-tint);color:var(--b-ink);font-weight:600;box-shadow:0 0 0 1.5px var(--fill)}
.pl.page .plhelp{margin:6px 18px 0;font-size:14px;line-height:1.4;color:var(--muted)}

/* the plate: plain white, rounded corners only */
.pl.page .leafbox{margin:6px 14px 0;height:196px;border-radius:22px;overflow:hidden;background:none;box-shadow:none}

/* the tip and the seal, one small row under the photo */
.pl.page .plnotes{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:4px 14px 0}
.pl.page .lstat,.pl.page .lseal{position:static;display:flex;align-items:center;gap:8px;max-width:100%;min-height:32px;padding:5px 13px 5px 11px;border-radius:16px;font-size:13px;font-weight:500;line-height:1.25;color:var(--b-ink);box-shadow:none}
.pl.page .lstat{background:var(--little-bg)}
.pl.page .lstat[data-s=ok]{background:var(--good-bg)}
.pl.page .lstat[data-s=none]{display:none}
.pl.page .lstat i{width:8px;height:8px;border-radius:50%;background:var(--little-d);flex:none}
.pl.page .lstat[data-s=ok] i{background:var(--good-d)}
.pl.page .lstat span{overflow-wrap:anywhere}
.pl.page .lseal{background:var(--seal-bg);color:var(--seal-ink);box-shadow:inset 0 0 0 1px var(--seal-ring);font-weight:600}
.pl.page .lseal i{position:relative;width:18px;height:18px;border-radius:50%;box-shadow:inset 0 0 0 1.5px var(--seal-ring);flex:none}
.pl.page .lseal i::after{content:"";position:absolute;left:6px;top:3px;width:4px;height:8px;border-right:2px solid var(--seal-mark);border-bottom:2px solid var(--seal-mark);transform:rotate(40deg)}

/* four equal white cards: a 4 px bar of the nutrient's own colour on top, a big dark number, a dark label, a thin progress bar */
.pl.page .tiles4{grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin:8px 14px 0}
.pl.page .tiles4 .tile{position:relative;overflow:hidden;min-width:0;padding:13px 8px 9px;border-radius:16px;background:#fff;box-shadow:var(--b-sh);text-align:left}
.pl.page .tiles4 .tile::before{content:"";position:absolute;left:0;right:0;top:0;height:4px;background:var(--c)}
.pl.page .tiles4 .tile .lbl{display:block;font-size:12px;font-weight:500;line-height:1.2;color:var(--b-ink2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pl.page .tiles4 .tile .val{margin-top:3px;font-size:22px;font-weight:600;line-height:1.1;letter-spacing:-.3px;color:var(--b-ink)}
.pl.page .tiles4 .tile .of{font-size:12px;line-height:1.3;color:var(--b-ink2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pl.page .tiles4 .tile .bar{height:4px;margin-top:7px;border-radius:2px;background:color-mix(in srgb,var(--c) 16%,#fff)}
.pl.page .tiles4 .tile .bar b{background:var(--c)}

/* the foods: no peach box, no bullet; a plain title, "Suggested plate" as a small grey label */
.pl.page .panel{margin:10px 0 0;padding:0;background:none;box-shadow:none;border-radius:0;overflow:visible}
.pl.page .panel .hd{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:0 14px 0 18px}
.pl.page .pltitle{margin:0;font-size:17px;font-weight:600;line-height:1.25;color:var(--b-ink)}
.pl.page .panel .hd .btn-link{margin:0 -8px 0 0;font-size:12.5px;font-weight:400;color:var(--muted)}

/* a swipeable row (scroll-snap) with a clear peek of the next card, like Today */
.pl.page .shelf{container-type:inline-size;padding:4px 0 16px;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scroll-padding:0 14px;overscroll-behavior-x:contain;cursor:auto}
.pl.page .shelf.dragging{scroll-snap-type:none;cursor:grabbing}
.pl.page .shelf-track{display:flex;align-items:stretch;gap:10px;width:max-content;padding:0 14px}
.pl.page .card{--cw:118px;flex:none;width:var(--cw);box-sizing:border-box;scroll-snap-align:start;display:flex;flex-direction:column;align-items:stretch;gap:0;padding:8px 8px 4px;border-radius:20px;background:#fff;box-shadow:var(--b-sh);text-align:left}
/* tile width by the room there is: 3 whole tiles + a 34 px peek of the 4th from 380 px up; below that 2 whole tiles + a clear peek of the 3rd */
@container (min-width:380px){.pl.page .card{--cw:104px}}
.pl.page .card.on{box-shadow:0 0 0 1.5px var(--fill)}
.pl.page .card .phw{position:relative;z-index:2;height:84px}
.pl.page .card .ph{display:flex;align-items:center;justify-content:center;height:84px;border-radius:14px;background:var(--cc,var(--t-amber))}
.pl.page .card .ph img{width:80px;height:80px;margin:0;object-fit:contain;filter:drop-shadow(0 4px 4px rgba(90,45,10,.22))}
.pl.page .card .nm{position:relative;display:block;height:auto;margin:-12px 0 -12px;padding:14px 2px;font-size:14px;font-weight:500;line-height:1.25;white-space:normal;overflow:visible;overflow-wrap:anywhere;color:var(--b-ink)}
.pl.page .shelf-track.two .card .nm{min-height:calc(2.5em + 28px)}
.pl.page .card .pr{position:relative;display:block;width:100%;height:auto;min-height:0;margin:-7px 0 -19px;padding:9px 2px 21px;font-size:12px;font-weight:400;line-height:1.3;text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--b-ink2)}
.pl.page .card .pr.tap{text-decoration:underline dotted;text-underline-offset:3px}
.pl.page .card .por{position:absolute;left:6px;top:6px;z-index:3;height:22px;padding:0 8px;border-radius:11px;background:#fff;color:var(--b-ink);font-size:12px;font-weight:600;box-shadow:0 0 0 1px var(--card-line)}

/* the pick button: a small round white + (36 px, 44 px hit area) on the photo's bottom-right corner; a filled orange tick once the food is on the plate */
.pl.page .card .add{position:absolute;right:2px;bottom:2px;top:auto;left:auto;z-index:3;display:block;width:44px;height:44px;min-height:44px;margin:0;padding:0;border:0;border-radius:50%;background:none;box-shadow:none;overflow:visible;font-size:0;line-height:0;color:transparent;text-indent:0;transform:none}
.pl.page .card .add::after{display:none}
.pl.page .card .add::before{content:"";display:block;position:absolute;left:4px;top:4px;width:36px;height:36px;margin:0;border:0;border-radius:50%;transform:none;
  background:linear-gradient(var(--strong),var(--strong)) center/14px 2.6px no-repeat,linear-gradient(var(--strong),var(--strong)) center/2.6px 14px no-repeat,#fff;
  box-shadow:0 4px 10px -2px rgba(60,30,10,.35),0 0 0 1px var(--card-line);transition:background-color .2s var(--ease),transform .25s var(--ease)}
.pl.page .card .add.on{background:none;box-shadow:none}
.pl.page .card .add.on::before{margin:0;border:0;transform:none;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 10.5l3.2 3.2L15 6.8' fill='none' stroke='%23fff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/20px no-repeat,var(--fill);
  box-shadow:0 4px 10px -2px rgba(234,94,10,.6)}
.pl.page .card .add:active::before{transform:scale(.92)}
.pl.page .card .add:focus-visible{outline:3px solid var(--strong);outline-offset:-2px;border-radius:50%}

/* the buttons at the bottom: Fill my plate (secondary), then the ONE primary, floating above the bottom bar (>= 12 px clear of it) while the page scrolls */
.pl.page .btn.fill{width:calc(100% - 28px);margin:2px 14px 0}
.pl.page .btn.addall{position:sticky;bottom:calc(110px + var(--safe-b));z-index:44;width:calc(100% - 28px);margin:14px 14px 0;box-shadow:0 14px 22px -10px rgba(234,94,10,.7),0 0 0 8px rgba(255,255,255,.96)}
.pl.page .btn.addall:disabled{box-shadow:0 0 0 8px rgba(255,255,255,.96)}

@media (max-width:340px){
  .pl.page .tiles4{gap:6px;margin-left:10px;margin-right:10px}
  .pl.page .tiles4 .tile{padding-left:6px;padding-right:6px}
  .pl.page .tiles4 .tile .val{font-size:21px}
  .pl.page .leafbox,.pl.page .plnotes{margin-left:10px;margin-right:10px}
  .pl.page .mswrap{margin-left:10px;margin-right:10px}
}

/* Telugu: one weight, nothing under 13 px, a hairline stroke on titles and labels */
html.te .pl.page .plhelp{font-size:14.5px}
html.te .pl.page .msw button{font-size:16px;font-weight:400;-webkit-text-stroke:0}
html.te .pl.page .msw button.on{-webkit-text-stroke:.2px currentColor}
html.te .pl.page .pltitle{font-size:17px;-webkit-text-stroke:var(--tes,.4px) currentColor}
html.te .pl.page :is(.lstat,.lseal){font-size:13px}
html.te .pl.page .tiles4 .tile .lbl{font-size:13px;-webkit-text-stroke:var(--tes,.4px) currentColor}
html.te .pl.page .tiles4 .tile .of{font-size:13px}
html.te .pl.page .card .nm{font-size:14px;-webkit-text-stroke:var(--tes,.4px) currentColor}
html.te .pl.page .card .pr,html.te .pl.page .card .por{font-size:13px}
html.te .pl.page .panel .hd .btn-link{font-size:13px}
@media (prefers-reduced-motion:reduce){.pl.page .card .add::before{transition:none}}