/* Shared responsive layout and motion for the public demo and member area. */
.app-shell{grid-template-columns:230px minmax(0,1fr)}
.app-main{min-width:0;padding-top:40px;overflow-wrap:break-word}
.app-main .grid2,.modalbody .grid2{grid-template-columns:repeat(2,minmax(0,1fr))}
.app-main .grid3,.library-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
.app-main .grid4{grid-template-columns:repeat(4,minmax(0,1fr))}
.app-main :is(.card,.stat,.method-card,.recipe-card,.field,.mealrow>div){min-width:0}
.pagehead{flex-wrap:wrap;scroll-margin-top:140px}
.pagehead>div{min-width:0}.pagehead h1{overflow-wrap:normal}
.library-grid{align-items:stretch;gap:20px}
.library-grid .method-card{padding:26px;min-height:280px;gap:0}
.library-grid .tag{align-self:flex-start;max-width:100%;line-height:1.5}
.library-grid .method-name{font-size:clamp(28px,3vw,42px);line-height:1.15;letter-spacing:-.04em;margin:22px 0 12px;overflow-wrap:normal}
.library-grid .method-card p{margin:0 0 24px;font-size:14px;line-height:1.65}
.library-grid .textbtn{justify-content:space-between;gap:16px;text-align:left;min-height:44px;width:100%;font-size:14px}
.formgrid{grid-template-columns:repeat(2,minmax(0,1fr))}.field :is(input,select,textarea){width:100%;min-width:0}
.app-main .recipe-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
.mealrow{grid-template-columns:110px minmax(0,1fr) auto}.meal-actions{flex-wrap:wrap}
.ui-motion-toggle{font:inherit;font-size:11px;color:var(--muted);background:transparent;border:1px solid var(--line);border-radius:30px;padding:8px 12px;min-height:36px;white-space:nowrap}
.app-main>.ui-motion-toggle{display:block;margin:0 0 18px auto}
.ui-depth{--ui-rx:0deg;--ui-ry:0deg;transform:perspective(1000px) rotateX(var(--ui-rx)) rotateY(var(--ui-ry));transition:transform .22s ease-out,box-shadow .25s,border-color .25s;transform-origin:center}
@media(hover:hover) and (pointer:fine){.ui-depth:hover{border-color:#ffffff45;box-shadow:0 16px 38px #0005}.ui-depth:focus-within{border-color:#ffffff60}}
.ui-arrive{animation:ui-arrive .65s cubic-bezier(.2,.7,.25,1) both;animation-delay:var(--ui-delay,0ms)}
@keyframes ui-arrive{from{opacity:.4;transform:perspective(1000px) translateY(22px) rotateX(7deg) scale(.985)}to{opacity:1;transform:perspective(1000px) translateY(0) rotateX(0) scale(1)}}
dialog[open]{animation:ui-dialog .25s ease-out}@keyframes ui-dialog{from{opacity:.3;transform:translateY(14px) scale(.98)}to{opacity:1;transform:none}}
.bottomnav a{transition:color .2s,background .2s}.bottomnav a.active{background:#ff203810;border-radius:12px}
.app-main .daystrip{max-width:100%;overflow-x:auto}.chart{max-width:100%}
@media(max-width:1100px){.app-shell{grid-template-columns:195px minmax(0,1fr)}.library-grid,.app-main .recipe-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.app-main .grid4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:760px){
 .app-shell{display:block}.app-main{padding:28px 18px calc(110px + env(safe-area-inset-bottom))}
 .app-main .grid2,.app-main .grid3,.app-main .coach-layout{grid-template-columns:1fr}
 .app-header{min-height:68px;height:auto;padding:12px 18px;gap:10px}.app-header>.row{gap:10px}.app-header .btn{max-width:160px;line-height:1.3}
 .pagehead h1{font-size:clamp(27px,7vw,36px)}.pagehead p{font-size:14px;line-height:1.6}.pagehead .eyebrow{line-height:1.5;letter-spacing:.12em}
 .library-grid{grid-template-columns:minmax(0,1fr);gap:16px}.library-grid .method-card{min-height:0;padding:24px}
 .library-grid .method-name{font-size:36px;margin:18px 0 12px}.library-grid .tag{font-size:11px}.library-grid .method-card p{font-size:14px;margin-bottom:18px}.library-grid .textbtn{font-size:14px}
 .mealrow{grid-template-columns:76px minmax(0,1fr) 32px;gap:10px}.mealrow>img,.mealrow>.food-placeholder{width:76px;height:86px}
 .callout{padding:20px;line-height:1.65}.modalbody{overflow-wrap:break-word}.modalfoot{flex-wrap:wrap}.modalfoot .btn{flex:1}
 .app-main .recipe-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.recipe-card h3{overflow-wrap:normal}
 .cinema-page .grid4{grid-template-columns:minmax(0,1fr)}.cinema-page .method-card{min-height:0;padding:24px}.cinema-page .method-card p{font-size:14px}
}
@media(max-width:400px){.app-main .recipe-grid,.modalbody .formgrid{grid-template-columns:1fr}.app-main .recipe-grid .pic{height:220px}.app-main .recipe-grid h3{font-size:19px}.formgrid{grid-template-columns:1fr}.app-header .btn{font-size:10px;padding:8px}.mealrow{grid-template-columns:62px minmax(0,1fr) 30px}.mealrow>img,.mealrow>.food-placeholder{width:62px;height:76px}.app-main .stats{grid-template-columns:repeat(2,minmax(0,1fr))}}
html.ui-motion-off .ui-depth{transform:none!important}html.ui-motion-off .ui-arrive,html.ui-motion-off dialog{animation:none!important}
@media(prefers-reduced-motion:reduce){.ui-depth{transform:none!important}.ui-arrive,dialog[open]{animation:none!important}}
@media print{.ui-motion-toggle{display:none!important}.ui-depth{transform:none!important}}
.nutrients{grid-template-columns:repeat(4,minmax(0,1fr))}.nutrients>div{min-width:0}.nutrients strong{font-size:clamp(14px,1.6vw,18px);overflow-wrap:anywhere}
@media(min-width:761px) and (max-width:1000px){.app-main .grid2,.app-main .grid3,.app-main .coach-layout{grid-template-columns:1fr}.app-main .formgrid{grid-template-columns:repeat(2,minmax(0,1fr))}.library-grid{grid-template-columns:1fr}}