/* UI polish, 6 Oct 2026, from the web-design-guidelines review and spec 110, 111, 133. Visual only. *//* a fingertip's worth of tap area, 44px, on every Week Path checkpoint; the node itself is unchanged */


body.pm-premium .wpx-days i::before{content:"";position:absolute;left:-22px;top:-22px;width:44px;height:44px;border-radius:50%}/* quiet text actions on Workout: 44px tall */

body.pm-premium #wkHero .wh-quiet .wh-plain,body.pm-premium #wkHero.noweek .wh-plain{min-height:44px;padding:8px 0!important}
body.pm-premium #progress .wk-weekbtns #setupStarterBtn{min-height:44px}
/* no-split card on phones: the figure stays in its own column (it used to spill 48px into the words),
   and the words and keys stop short of it, so nothing runs over the figure */
@media (max-width:899px){
  body.pm-premium #wkHero.noweek .wh-v{align-items:flex-end}
  body.pm-premium #wkHero.noweek .wh-body{width:128px}
  body.pm-premium #wkHero.noweek .wh-k{font-size:32px!important;white-space:nowrap}
  body.pm-premium #wkHero.noweek .wh-e{max-width:200px}
  body.pm-premium #wkHero.noweek .wh-split{max-width:206px}
  body.pm-premium #wkHero.noweek .wh-build{width:100%!important;padding:14px 12px!important;font-size:15px!important;white-space:nowrap;justify-content:center}
  body.pm-premium #wkHero.noweek .wh-own{width:100%!important;padding:14px 12px!important;font-size:15px;white-space:nowrap}
}
@media (max-width:374px){
  body.pm-premium #wkHero.noweek{grid-template-columns:minmax(0,1fr) 108px}
  body.pm-premium #wkHero.noweek .wh-v,body.pm-premium #wkHero.noweek .wh-body{width:108px}
  body.pm-premium #wkHero.noweek .wh-k{font-size:30px!important}
  body.pm-premium #wkHero.noweek .wh-e{max-width:230px}/* the light words may cross the faded figure's edge; the solid keys may not */   
  body.pm-premium #wkHero.noweek .wh-split{max-width:196px}
}/* the Create an account and Later keys: 44px tall (they were 40) */

:root:not([data-theme="dark"]) body.pm-premium #today #saveCard #saveGo,:root:not([data-theme="dark"]) body.pm-premium #today #saveCard #saveLater,
:root[data-theme="dark"] body.pm-premium #today #saveCard #saveGo,:root[data-theme="dark"] body.pm-premium #today #saveCard #saveLater{min-height:44px!important}/* nothing under 12px (spec 110): kickers, weekday names and small tags at 12.5px */
body.pm-premium .wpx-days i span{font-size:var(--ui-meta,14px)}
body.pm-premium .wpx-detail b{font-size:var(--ui-meta,14px)}
body.pm-premium .msq-l{font-size:var(--ui-meta,14px)}
body.pm-premium .sq i{font-size:var(--ui-meta,14px)}
@media (max-width:1139px){body.pm-premium .pf-stage .pf-k{font-size:var(--ui-meta,14px)}body.pm-premium .pf-tags b{font-size:var(--ui-meta,14px)}}/* the four empty rings above Set up Nutrition were decoration (spec 133) */

body.pm-premium #eatSetupBig .es-rings{display:none}
body.pm-premium #eatSetupBig h2{margin-top:0!important}/* taps act at once on phones: no double-tap zoom wait on controls */

button,.opt,.pfrow,.pfdest,.chipbtn,.tabs button,.wpx-days i{touch-action:manipulation}/* ---- BR-09 THE BUILD, concept 1, emblem-led (onbBuild, #onbBuild.bx1). Owner's pick, 9 Oct ----
   One object at a time: the approved emblem, large, in a thin ring, on a soft shadow; one word and one line under
   it. When it is ready the emblem steps back and the summary and targets settle under it. Light mode, phone. */

body.pm-premium .onb-build.bx1{display:flex;flex-direction:column;gap:0;flex:1 1 auto;min-height:0;--em-s:min(66vw,270px)}
body.pm-premium .bx1 .bx-head{text-align:left;padding:0 2px}
body.pm-premium .bx-k{display:block;text-transform:none!important;letter-spacing:-.02em!important;font-size:16px!important;font-weight:800;color:#2F6A9A;margin:0}
body.pm-premium .bx1 .ob-h{margin:6px 0 0;font-family:var(--sans);font-size:14px;font-weight:700;line-height:1.3;letter-spacing:0;color:#4E6A86}
body.pm-premium .bx1 .ob-sub{margin:0;font-size:14px;font-weight:600;line-height:1.3;color:#4E6A86}
@media (max-width:360px){ body.pm-premium .bx1 .ob-h,body.pm-premium .bx1 .ob-sub{font-size:var(--ui-meta,14px)} }/* the hero: emblem, ring and shadow, centred in the free height */

body.pm-premium .bx1-hero{position:relative;flex:0 0 auto;height:calc(var(--em-s) * 1.32);margin-top:auto;display:flex;align-items:center;justify-content:center;transition:height .55s var(--ease)}
body.pm-premium .bx1-ring{position:absolute;left:50%;top:50%;width:calc(var(--em-s) * 1.22);height:calc(var(--em-s) * 1.22);transform:translate(-50%,-50%) rotate(-90deg);overflow:visible;
  transition:width .55s var(--ease),height .55s var(--ease)}
body.pm-premium .bx1-ring circle{fill:none;vector-effect:non-scaling-stroke}
body.pm-premium .bx1-r0{stroke:rgba(167,207,242,.38);stroke-width:1.2}
body.pm-premium .bx1-r1{stroke:#A7CFF2;stroke-width:2;stroke-linecap:round;transition:stroke-dashoffset .45s var(--ease)}
body.pm-premium .bx1 .bx-emw{position:relative;display:block;width:var(--em-s);height:var(--em-s);opacity:0;transform:translateY(10px) scale(.94);
  filter:drop-shadow(0 26px 30px rgba(40,70,110,.22));transition:opacity .5s var(--ease),transform .6s var(--ease),width .55s var(--ease),height .55s var(--ease)}
body.pm-premium .bx1.bx-in .bx-emw{opacity:1;transform:none}
body.pm-premium .bx1 .bx-emw img{width:100%;height:100%;object-fit:contain;display:block}/* one band of light per stage, clipped to the emblem's own outline; the mark itself never moves or changes */

body.pm-premium .bx1 .bx-emw::after{content:"";position:absolute;inset:0;-webkit-mask:var(--em) center/contain no-repeat;mask:var(--em) center/contain no-repeat;
  background:linear-gradient(115deg,rgba(255,255,255,0) 36%,rgba(255,255,255,.8) 50%,rgba(255,255,255,0) 64%) no-repeat;background-size:300% 100%;background-position:100% 0;opacity:0;pointer-events:none}
@media (prefers-reduced-motion:no-preference){ body.pm-premium .bx1 .bx-emw.sw::after{animation:bx1Sweep .7s cubic-bezier(.3,.6,.3,1) both} }
@keyframes bx1Sweep{0%{opacity:1;background-position:100% 0}100%{opacity:1;background-position:0 0}}
body.pm-premium .bx1-shadow{position:absolute;left:50%;top:calc(50% + var(--em-s) * .5);width:calc(var(--em-s) * .8);height:22px;transform:translate(-50%,-30%);border-radius:50%;
  background:radial-gradient(closest-side,rgba(50,80,115,.2),rgba(50,80,115,0));opacity:0;transition:opacity .6s var(--ease),width .55s var(--ease),top .55s var(--ease)}
body.pm-premium .bx1.bx-in .bx1-shadow{opacity:1}/* settled: the emblem steps back to two thirds and the plan settles under it */

body.pm-premium .bx1.bx-ready{--em-s:min(44vw,180px)}
body.pm-premium .bx1.bx-ready .bx1-hero{margin-top:18px}/* the words */

body.pm-premium .bx1-copy{display:flex;flex-direction:column;align-items:center;padding:10px 0 0}/* the older build rule fades every bold word in the line; the numbers are always shown */

body.pm-premium .bx1 .bx-n b{opacity:1!important;transform:none!important;animation:none}
body.pm-premium .bx1 .ob-word{display:flex;flex-direction:column;align-items:center;gap:8px;padding:0;text-align:center}
body.pm-premium .bx1 #obWord{font-size:40px;line-height:1.05}
body.pm-premium .bx1 .ob-detail{min-height:0;max-width:30ch;font-size:17px;font-weight:700;line-height:1.35;color:#2F6A9A}
body.pm-premium .bx1.bx-ready #obWord{font-size:34px}
body.pm-premium .bx1 .ob-dots{margin-top:6px}
body.pm-premium .bx1.bx-ready .ob-dots{display:none}/* the targets: numbers, and what they are right under them */

body.pm-premium .bx-tg{display:flex;flex-wrap:wrap;justify-content:center;align-items:baseline;gap:0 16px;max-height:0;overflow:hidden;opacity:0;transition:opacity .35s var(--ease),max-height .4s var(--ease),margin .4s var(--ease)}
body.pm-premium .bx-tg.in{opacity:1;max-height:90px;margin-top:10px}
body.pm-premium .bx-n{display:inline-flex;align-items:baseline;gap:4px;white-space:nowrap}
body.pm-premium .bx-n b{font-family:var(--vr-num,var(--sans));font-size:30px!important;font-weight:800;letter-spacing:-.03em;font-variant-numeric:tabular-nums;color:#163E63;transition:color .3s;line-height:1.1}
body.pm-premium .bx-n i{font-style:normal;font-size:var(--ui-meta,14px);font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:#4E5A6E}
body.pm-premium .bx-st{flex-basis:100%;text-align:center;font-size:var(--ui-meta,14px);font-weight:700;line-height:1.3;color:#4E5A6E;margin-top:4px}
body.pm-premium .bx-st[data-st="reviewed"]{color:#2F6A9A}
body.pm-premium .bx-st[data-st="reviewed"]::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:#A7CFF2;box-shadow:0 0 0 1.5px #7FB3E0;margin-right:7px;vertical-align:1px}
@media (prefers-reduced-motion:no-preference){ body.pm-premium .bx-tg.bx-upd b{animation:bxUpd .7s var(--ease) both} }
@keyframes bxUpd{0%{color:#2F6A9A}100%{color:#163E63}}
body.pm-premium .bx1 .ob-skip{margin:auto 0 0;padding-top:14px;text-align:center;font-size:var(--ui-meta,14px);font-weight:700;color:#4E6A86}
body.pm-premium .bx1.bx-ready .ob-skip{visibility:hidden}/* a tap or reduced motion: no travel, everything simply arrives */

body.pm-premium .bx1.bx-skip .bx-emw,body.pm-premium .bx1.bx-skip .bx1-ring,body.pm-premium .bx1.bx-skip .bx1-shadow{transition-duration:.2s}
@media (prefers-reduced-motion:reduce){ body.pm-premium .bx1 .bx-emw,body.pm-premium .bx1-ring,body.pm-premium .bx1-shadow,body.pm-premium .bx1-r1,body.pm-premium .bx-tg{transition:none!important} }
/* short phones (iPhone SE size): a smaller emblem, the words a step down */
@media (max-height:700px){ body.pm-premium .onb-build.bx1{--em-s:min(58vw,190px)} body.pm-premium .bx1.bx-ready{--em-s:min(36vw,120px)}
  body.pm-premium .bx1 #obWord{font-size:34px} body.pm-premium .bx1.bx-ready #obWord{font-size:30px}
  body.pm-premium .bx1 .ob-detail{font-size:15.5px} body.pm-premium .bx-n b{font-size:26px!important} body.pm-premium .bx-st{font-size:var(--ui-meta,14px)} }
