/* v67 PORTIONS: never small, medium, large. A counted food asks how many; anything else is sized by sliding the
   food itself (cut from the photo) bigger or smaller on a plate, starting where the photo measured it. */

.phc{display:flex;flex-direction:column;align-items:center;gap:10px;margin:2px 0 4px}
.phc-row{display:flex;align-items:center;justify-content:center;gap:22px}
.phc-b{width:58px;height:58px;border-radius:50%;border:1px solid rgba(255,255,255,.95);background:linear-gradient(180deg,#fff,#F1F0EC);
  box-shadow:0 1px 0 #fff inset,0 10px 20px -12px rgba(22,62,99,.55);font:inherit;font-size:30px;font-weight:700;line-height:1;color:var(--bp-ink,#163E63);cursor:pointer;transition:transform .12s var(--ease)}
.phc-b:active{transform:scale(.9)}
.phc-n{display:flex;flex-direction:column;align-items:center;min-width:112px}
.phc-num{font-size:58px;font-weight:800;line-height:1;color:var(--bp-ink,#163E63);letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.phc-u{font-size:15px;font-weight:700;color:var(--bp-ink,#163E63);opacity:.72;margin-top:2px}
.phc-dots{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;min-height:22px;max-width:270px}
.phc-dots i{width:16px;height:20px;border-radius:50% 50% 48% 48%/58% 58% 42% 42%;background:radial-gradient(circle at 35% 30%,#fff 0%,#DCEBF8 45%,#A7CFF2 100%);box-shadow:0 2px 4px rgba(22,62,99,.25)}
.phc-dots i.new{animation:phcIn .3s var(--ease) both}
.phc-dots em{font-style:normal;font-weight:800;font-size:var(--ui-meta,14px);color:var(--bp-ink,#163E63);align-self:center}
@keyframes phcIn{from{transform:scale(.2);opacity:0}to{transform:scale(1);opacity:1}}
.phc-sum,.phs-sum{margin:0;font-size:15px;font-weight:700;color:var(--bp-ink,#163E63);opacity:.85;font-variant-numeric:tabular-nums;text-align:center}
.phq-go{display:flex;flex-direction:column;gap:4px;margin-top:12px}
.phq-go .btn{width:100%}
.phq-alt{background:none;border:0;font:inherit;font-weight:700;font-size:15px;color:var(--bp-ink,#163E63);opacity:.78;padding:10px;cursor:pointer}
.phs-hero{flex:1 1 auto;min-height:250px;display:flex;align-items:center;justify-content:center;border-radius:28px 28px 0 0;
  background:radial-gradient(120% 90% at 50% 30%,#FBFAF8 0%,#ECEAE6 100%)}
.phs-stage{position:relative;width:min(250px,66vw);aspect-ratio:1}
.phr-sheet .phs-stage{width:min(170px,46vw);margin:4px auto 8px}
.phs-plate{position:absolute;inset:0;border-radius:50%;background:radial-gradient(circle,#fff 0 55%,#F2F1ED 56% 62%,#FDFDFC 63% 71%,#E6E4DF 100%);
  box-shadow:0 22px 34px -18px rgba(37,38,39,.5),0 1px 0 #fff inset}
.phs-food{position:absolute;left:21%;top:21%;width:58%;height:58%;border-radius:50%;background-repeat:no-repeat;
  -webkit-mask-image:radial-gradient(circle,#000 56%,transparent 71%);mask-image:radial-gradient(circle,#000 56%,transparent 71%);transition:transform .14s ease-out;will-change:transform}
.phs-food.plain{background:radial-gradient(circle at 40% 35%,#F6E7B8,#E2C47A 70%)}
.phs-ctl{display:flex;flex-direction:column;align-items:center;gap:6px;width:100%}
.phs-r{-webkit-appearance:none;appearance:none;width:100%;max-width:330px;height:34px;background:transparent;margin:0;touch-action:pan-y}
.phs-r::-webkit-slider-runnable-track{height:10px;border-radius:5px;background:linear-gradient(90deg,#E6F1FB,#A7CFF2)}
.phs-r::-moz-range-track{height:10px;border-radius:5px;background:linear-gradient(90deg,#E6F1FB,#A7CFF2)}
.phs-r::-webkit-slider-thumb{-webkit-appearance:none;width:34px;height:34px;margin-top:-12px;border-radius:50%;background:linear-gradient(180deg,#fff,#EEF5FC);border:1px solid rgba(22,62,99,.18);box-shadow:0 6px 14px -6px rgba(22,62,99,.6)}
.phs-r::-moz-range-thumb{width:34px;height:34px;border-radius:50%;background:linear-gradient(180deg,#fff,#EEF5FC);border:1px solid rgba(22,62,99,.18);box-shadow:0 6px 14px -6px rgba(22,62,99,.6)}
.phs-ends{position:relative;width:100%;max-width:330px;height:18px;font-size:var(--ui-meta,14px);font-weight:700;color:var(--bp-ink,#163E63);opacity:.72}
.phs-ends span{position:absolute;top:0;white-space:nowrap}
.phs-ends span:first-child{left:0}.phs-ends span:last-child{right:0}
.phs-ends span.mid{transform:translateX(-50%)}
.phr-amt{display:flex;flex-direction:column;align-items:center;width:100%;margin:4px 0 6px}
.phr-amt .phs-ctl{max-width:330px}