/* Layout invariants come after visual themes so effects cannot reposition controls. */
html{scroll-padding-bottom:110px}
main,.shell,.page-enter,.dashboard-grid>*,.two-col>*,.progress-grid>*,.cards>*,.metrics>*,.stat-grid>*,.nutrition-stats>*,.form-grid>*{min-width:0}
.two-col{grid-template-columns:minmax(0,1.5fr) minmax(0,1fr)}
.progress-grid{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr)}
.form-grid,.plan-list{grid-template-columns:repeat(2,minmax(0,1fr))}
.library .cards{grid-template-columns:repeat(3,minmax(0,1fr))}
.metric strong,.chart-number,.timer{font-variant-numeric:tabular-nums}
.panel-title,.section-head,.welcome{gap:14px;flex-wrap:wrap}
.welcome>div:first-child{flex:1 1 220px;min-width:0}
.streak{flex-shrink:0}
.hero-meta{flex-wrap:wrap;row-gap:8px}.hero-meta>span{white-space:nowrap}
.hero-number{direction:ltr;unicode-bidi:embed;white-space:nowrap;pointer-events:none}
.settings-row>span,.meal>div,.exercise-item>div,.session-mini>div,.leader>div{min-width:0;overflow-wrap:anywhere}
.settings-row>.btn,.exercise-item>button,.meal>button,.leader>.avatar,.switch,.meal>img,.session-mini>.square-icon{flex-shrink:0}
.settings-row>.btn{max-width:45%;white-space:normal;text-align:center}
.chat-form input{min-width:0}.chat-form .btn{flex-shrink:0}
.coach-message,.info-note,dialog p{overflow-wrap:anywhere}
.set-row{grid-template-columns:32px minmax(0,1fr) minmax(0,1fr) 44px;gap:10px}.set-row input{min-width:0}
.badge{min-width:85px}.day{min-width:0}
.topbar{gap:16px}.top-actions{flex-shrink:0}.topbar .icon-btn{flex:none}
.icon-btn{padding:0;line-height:1;flex-shrink:0;min-width:42px;min-height:42px}
.icon-btn:focus-visible{outline:2px solid #d7ffa4;outline-offset:2px}
body[data-input="pointer"] .icon-btn:focus{outline:none}
dialog .close:hover{transform:none;background:#dfffea16}
.sidebar{width:244px;padding:24px 16px 16px;display:grid;grid-template-rows:auto auto minmax(0,1fr) auto;overflow:hidden}
.shell{margin-right:276px}
.side-caption{margin:22px 12px 10px}
.sidebar nav{min-height:0;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;padding:3px 4px 8px;scrollbar-gutter:stable}
.nav-item{min-height:46px;padding:10px 12px;gap:10px;border:1px solid transparent;margin:3px 0}
.nav-item>span{min-width:0;line-height:1.7}.nav-item .icon{flex:none}.nav-item .new{font-style:normal;flex:none}
.side-bottom{min-width:0;margin:0;padding-top:12px}
.pro-card{padding:14px}.pro-card p{margin:4px 0 10px}.pro-card h3{margin-top:6px}.profile-mini{margin-top:14px;gap:8px}.profile-mini>span:nth-child(2){min-width:0;overflow-wrap:anywhere}
/* The close control has its own row. Only the dialog body scrolls. */
dialog{padding:0;width:min(640px,calc(100% - 32px));max-width:calc(100% - 32px);max-height:calc(100dvh - 32px);overflow:hidden;margin:auto;box-sizing:border-box}
dialog[open]{display:grid;grid-template-rows:auto minmax(0,1fr)}
.dialog-toolbar{display:flex;justify-content:flex-end;align-items:center;padding:12px 16px 6px;min-height:62px;position:relative;z-index:5}
dialog .close{position:static;inset:auto;display:grid;place-items:center;width:42px;height:42px;min-width:42px;min-height:42px;margin:0;transform:none;font-size:0;border-radius:50%}
dialog .close svg{width:20px;height:20px;pointer-events:none}
#dialog-body{min-height:0;min-width:0;overflow:auto;overscroll-behavior:contain;scrollbar-gutter:stable;padding:4px 28px 28px;scroll-padding:16px}
dialog h2{padding:0;margin-top:0;line-height:1.65;overflow-wrap:anywhere}
dialog .wizard-intro{margin-top:0}.wizard-intro h2{margin-top:8px}.wizard-stage{min-width:0}
.wizard-choice{min-width:0}.wizard-choice>span:not(.choice-check){min-width:0;overflow-wrap:anywhere}.choice-check{flex:none}.wizard-choice>.icon{flex:none}
.wizard-footer{gap:12px}.wizard-footer small{min-width:0}.wizard-complete{padding:6px 0 0}
.checklist label input{flex:none}.checklist label{min-width:0;overflow-wrap:anywhere}
.watch-preview{width:min(270px,100%);box-sizing:border-box;padding:24px 14px}
.toast{max-width:calc(100vw - 32px);overflow-wrap:anywhere}
@media(min-width:1101px) and (max-height:850px){.sidebar{padding-top:18px}.side-caption{margin-top:15px}.side-bottom .pro-card .eyebrow,.side-bottom .pro-card h3,.side-bottom .pro-card p{display:none}.side-bottom .pro-card{padding:10px}.nav-item{min-height:43px;padding:8px 10px}.profile-mini{margin-top:10px}}
@media(max-width:1180px) and (min-width:1101px){.sidebar{right:12px;width:224px}.shell{margin-right:248px}.sidebar .nav-item{padding-inline:9px;font-size:13px}}
@media(max-width:1100px) and (min-width:741px){.sidebar{width:76px;right:10px;padding:20px 5px 12px;border-radius:25px;grid-template-rows:auto minmax(0,1fr)}.sidebar .brand{font-size:0;gap:0}.sidebar .brand-mark{font-size:42px;width:35px;height:38px}.sidebar .brand-dot,.sidebar .side-caption,.sidebar .side-bottom,.sidebar .nav-item>span,.sidebar .nav-item .new{display:none}.sidebar nav{margin-top:20px;padding:2px 3px;scrollbar-gutter:auto}.sidebar .nav-item{justify-content:center;min-height:46px;padding:12px 7px}.shell{margin-right:96px}.dashboard-grid{grid-template-columns:minmax(0,1fr) 245px}.progress-grid{grid-template-columns:1fr}.two-col{grid-template-columns:repeat(2,minmax(0,1fr))}.library .cards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:900px) and (min-width:741px){.dashboard-grid{grid-template-columns:1fr}.dashboard-aside{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.dashboard-aside>.panel,.dashboard-aside>.challenge{margin-top:0!important}.dashboard-aside>.challenge{grid-column:1/-1}.metrics{gap:12px}.two-col{grid-template-columns:1fr}.hero-content{max-width:85%}.cards{grid-template-columns:repeat(3,minmax(0,1fr))}.cards .workout-card:last-child{display:block}}
@media(max-width:740px){.sidebar{display:none}.shell{margin:0}.topbar{padding:0 12px;gap:10px;min-height:61px;height:auto}.top-actions{gap:8px}.mobile-brand{font-size:25px;white-space:nowrap}.top-actions .demo-pill{font-size:10px;padding:5px 8px}.dashboard-grid,.two-col,.progress-grid{grid-template-columns:1fr}.dashboard-aside{display:grid;grid-template-columns:1fr}.form-grid,.plan-list{grid-template-columns:1fr}.library .cards{grid-template-columns:repeat(2,minmax(0,1fr))}.welcome{align-items:flex-start}.welcome h1{font-size:24px}.welcome>.btn{align-self:flex-start}.panel-title h2{font-size:16px}.panel-title .eyebrow{letter-spacing:1px;font-size:11px}.settings-row{gap:12px}.settings-row>span{flex:1}.bottom-nav{padding:7px 4px}.bottom-nav a{flex:1 1 0;min-width:0;padding:8px 4px;font-size:10px}.bottom-nav a span{white-space:nowrap}.bottom-nav{padding-bottom:max(7px,env(safe-area-inset-bottom))}main{padding-bottom:calc(125px + env(safe-area-inset-bottom))}.hero-number{font-size:54px}.dialog-toolbar{padding:10px 12px 6px;min-height:58px}#dialog-body{padding:4px 20px 22px}.wizard-steps{gap:3px;margin:20px 0 24px}.wizard-stage h3{font-size:18px}.wizard-review{padding:4px 14px}.wizard-footer{position:relative}.wizard-footer .btn{min-width:90px}.card-body p{line-height:1.8}.nutrition-stats .metric strong{font-size:27px}}
@media(max-width:370px){main{padding-inline:14px}.topbar{margin-inline:12px;padding-inline:10px}.mobile-brand{font-size:23px}.top-actions{gap:6px}.welcome h1{font-size:22px}.welcome>div:first-child{flex-basis:175px}.hero-content{padding:20px;max-width:100%}.hero h2{font-size:27px}.hero-meta{column-gap:10px}.metrics{grid-template-columns:1fr}.metric{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.metric>div:first-child{flex:1;min-width:100px;font-size:12px}.metric strong{margin:0;font-size:24px}.metric small{font-size:11px}.metric svg{margin-inline-start:7px}.library .cards,.cards{grid-template-columns:1fr}.cards .workout-card:last-child{display:block}.card-image,.library .card-image{height:170px}.card-body h3{font-size:16px}.card-body p{font-size:12px}.stat-grid,.nutrition-stats{grid-template-columns:1fr}.week{gap:3px}.hero-number{font-size:44px}.set-row{grid-template-columns:26px minmax(0,1fr) minmax(0,1fr) 40px;gap:6px}.set-row input{padding:7px 3px}.bottom-nav a{font-size:9px}.wizard-step{font-size:10px}.wizard-choice{gap:9px;padding:12px 10px}.wizard-choice>.icon{width:23px;height:23px}#dialog-body{padding-inline:16px}.wizard-intro h2{font-size:22px}}
@media(max-height:500px){dialog{max-height:calc(100dvh - 16px)}.dialog-toolbar{min-height:52px;padding-block:6px}#dialog-body{padding-bottom:18px}.sidebar{top:8px;bottom:8px}}