/* JoyFit F5 — accessible mobile layout, final layer after legacy styles.
   Contrast, coherent touch targets, no overlay collisions. */
:root{--jf-f5-ink:#242832;--jf-f5-muted:#4c5865;--jf-f5-panel:#fff;--jf-f5-border:#dce0e5}
:root[data-theme="dark"]{--jf-f5-ink:#f8f5f5;--jf-f5-muted:#d1c7d0;--jf-f5-panel:#262a36;--jf-f5-border:#54505d}
/* Pending goals: never inherit dark letter color on dark cards. */
#app .jf-e4-pending{min-width:0;width:100%;max-width:100%;box-sizing:border-box;align-items:flex-start;background:var(--jf-f5-panel)!important;color:var(--jf-f5-ink)!important;border:1px solid var(--jf-f5-border)!important;border-inline-start:4px solid #ba552f!important;display:grid;grid-template-columns:42px minmax(0,1fr);gap:15px;position:relative;isolation:isolate}
#app .jf-e4-pending>div:nth-child(2){min-width:0;max-width:100%}
#app .jf-e4-pending h2{color:var(--jf-f5-ink)!important;overflow-wrap:normal;word-break:normal;font-size:clamp(19px,4.8vw,24px)!important;line-height:1.27!important;margin:5px 0 10px!important;letter-spacing:-.025em!important}
#app .jf-e4-pending p,#app .jf-e4-pending-kicker,#app .jf-e4-copy{color:var(--jf-f5-muted)!important;max-width:100%;line-height:1.55!important;opacity:1!important;position:static!important}
#app .jf-e4-pending-kicker{color:#b75532!important;font-weight:800!important;font-size:10px!important;letter-spacing:.075em!important}
:root[data-theme="dark"] #app .jf-e4-pending-kicker{color:#ffa780!important}
#app .jf-e4-pending button{display:inline-flex;align-items:center;justify-content:center;max-width:100%;min-height:44px;white-space:normal;text-align:center;margin:4px 0 0!important}
#app .jf-e4-pending-icon{background:#f9e5d9!important;color:#a34822!important}
:root[data-theme="dark"] #app .jf-e4-pending-icon{background:#6c4435!important;color:#ffccae!important}
#app .jf-e4-diet-pending{min-height:0!important;height:auto!important;display:flex!important;flex-direction:column!important;align-items:stretch!important;gap:16px!important;overflow:visible!important;background:var(--jf-f5-panel)!important;border-color:var(--jf-f5-border)!important;grid-column:auto!important;grid-row:auto!important;padding:16px!important}
#app .jf-e4-diet-pending .jf-e4-pending{margin:0!important;grid-column:auto!important;min-height:0!important;height:auto!important}
#app .jf-e4-diet-pending>p.jf-e4-copy{padding:0 5px;color:var(--jf-f5-muted)!important;font-size:14px!important;line-height:1.65!important;margin:0!important}
#app .jf-e4-hero-empty{min-height:0!important;height:auto!important;overflow:hidden!important}
#app .jf-e4-hero-empty .jf-vivo-hero-main{min-height:0!important;height:auto!important;max-width:100%!important;width:100%!important;padding:24px!important;gap:14px!important}
#app .jf-e4-hero-empty .jf-vivo-hero-main h2{font-size:clamp(24px,5.6vw,34px)!important;line-height:1.2!important}
#app .jf-e4-hero-empty .jf-vivo-hero-main .jf-e4-copy{color:var(--jf-f5-muted)!important}
#app .jf-e4-water-register{background:var(--jf-f5-panel)!important;border-color:var(--jf-f5-border)!important;color:var(--jf-f5-ink)!important}
#app .jf-e4-water-register>h2,#app .jf-e4-water-register>strong{color:var(--jf-f5-ink)!important}
#app .jf-e4-water-register>strong{font-size:clamp(25px,6vw,35px)!important;line-height:1.25!important;letter-spacing:-.035em!important}
#app .jf-e4-water-register>p{color:var(--jf-f5-muted)!important}
#app .jf-e4-water-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
#app .jf-e4-water-actions>button{background:var(--jf-f5-panel)!important;color:var(--jf-f5-ink)!important;border:1.5px solid var(--jf-f5-border)!important;font-size:14px!important;font-weight:700!important;min-height:48px!important;padding:10px 7px!important;box-shadow:none!important}
#app .jf-e4-water-actions>button:disabled{opacity:.5!important}
#app .jf-e4-water-actions>button:not(:disabled):active{background:#d0e7f3!important;color:#183744!important}
/* Onboarding and other sheets must preserve readable text in both themes. */
#intro .ob-shell:has(.jp-rec-results),#intro .ob-shell:has(.jp-wizard-calendar){background:var(--jf-f5-panel)!important;color:var(--jf-f5-ink)!important}
#intro .jp-summary-onboard .ob-content{width:min(100%,690px);max-width:690px;align-items:stretch;text-align:left}
#intro .jp-summary-onboard .ob-content>p,#intro .jp-summary-onboard .jf-note,#intro .jp-summary-onboard .jp-goals-choice label{color:var(--jf-f5-muted)!important}
#intro .jp-summary-onboard .jp-rec-results>div{min-width:0;background:var(--jf-f5-panel)!important;border-color:var(--jf-f5-border)!important;color:var(--jf-f5-ink)!important;min-height:0}
#intro .jp-summary-onboard .jp-rec-results :is(span,small){color:var(--jf-f5-muted)!important}
#intro .jp-summary-onboard .jp-rec-results strong{color:var(--jf-f5-ink)!important}
#intro .jp-summary-onboard .jp-goals-choice{color:var(--jf-f5-ink)!important}
#intro .jp-summary-onboard .jp-goals-inputs :is(label,input),#intro .jp-onboard-variant,#intro .jp-onboard-variant select{color:var(--jf-f5-ink)!important}
#intro .jp-summary-onboard .jf-note{font-size:13px!important;line-height:1.55!important;margin-top:18px!important}
#intro .jp-summary-onboard .jp-goals-inputs{margin:18px 0;gap:12px}
#intro .jp-summary-onboard .jp-goals-inputs label{min-width:0;gap:7px}
#intro .jp-summary-onboard .jp-goals-inputs input{min-width:0;width:100%;min-height:47px;background:var(--jf-f5-panel);border:1px solid var(--jf-f5-border);border-radius:10px;padding:10px;color:var(--jf-f5-ink)!important;font-size:15px}
#intro .ob-next,#intro .ob-back{min-height:47px!important}
/* Treino ABC: a escolha de dias e grupos funciona em ambos os modos. */
.jp-wizard-top{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:13px;margin:18px 0}
.jp-wizard-top label,.jp-wizard-schedule label,.jp-onboard-variant{display:grid;gap:7px;font-size:13px;font-weight:750;color:var(--t)}
.jp-wizard-top select,.jp-wizard-schedule select,.jp-onboard-variant select{min-height:45px;min-width:0;width:100%;border:1px solid var(--line);border-radius:10px;padding:8px;background:var(--card);color:var(--t);font:inherit}
#intro .jp-onboard-variant select,#intro .jp-wizard-schedule select{background:var(--jf-f5-panel);border-color:var(--jf-f5-border);color:var(--jf-f5-ink)}
.jp-wizard-calendar>p{font-size:13px;color:var(--t2);line-height:1.5}
#intro .jp-wizard-calendar>p{color:var(--jf-f5-muted)!important}
.jp-wizard-week{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px;margin:13px 0 6px}
.jp-wizard-week button{min-width:0;min-height:44px!important;border:1px solid var(--line)!important;background:var(--soft)!important;color:var(--t)!important;border-radius:9px!important;font-size:11px!important;font-weight:750!important;padding:7px 0!important}
.jp-wizard-week button.selected{background:#a94322!important;color:#fff!important;border-color:#a94322!important}
#intro .jp-wizard-week button{background:var(--jf-f5-panel)!important;color:var(--jf-f5-ink)!important;border-color:var(--jf-f5-border)!important}
#intro .jp-wizard-week button.selected{background:#a94322!important;color:#fff!important;border-color:#a94322!important}
.jp-wizard-schedule{display:grid;gap:11px;margin-top:12px}.jp-wizard-schedule label{padding:12px;border:1px solid var(--line);border-radius:11px;background:var(--soft)}
#intro .jp-wizard-schedule label{background:var(--jf-f5-panel)!important;border-color:var(--jf-f5-border)!important;color:var(--jf-f5-ink)!important}
.jp-wizard-count{font-weight:700!important;color:var(--t)!important}
#intro .jp-wizard-count{color:var(--jf-f5-ink)!important}
.jp-wizard-calendar h3{margin:20px 0 5px;font-size:17px;color:var(--t)}
#intro .jp-wizard-calendar h3{color:var(--jf-f5-ink)}
.jp-wizard-modal .jp-modal-actions>button{flex:1 1 150px}
/* Workout editor: one full line per exercise, then coherent grouped fields. */
.jp-ex-suggestions{border:1px solid var(--line);border-radius:12px;margin:13px 0;background:var(--soft);padding:11px 13px}
.jp-ex-suggestions summary{font-size:13px;font-weight:750;color:var(--t);cursor:pointer;line-height:1.5;list-style:revert}
.jp-suggestion-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;margin-top:11px}
.jp-suggestion-list>button{font-size:12px!important;min-height:40px;text-align:left;padding:8px!important;border:1px solid var(--line)!important;background:var(--card)!important;color:var(--t)!important;border-radius:9px!important;white-space:normal}
.jp-ex-list{gap:12px}.jp-ex-row{grid-template-columns:minmax(0,2fr) minmax(0,1fr) 72px 72px 40px;gap:10px;padding:14px;min-width:0}
.jp-ex-row label{font-size:12px!important;line-height:1.35!important;color:var(--t2)}
.jp-ex-row :is(input,select){min-width:0;font-size:14px!important;min-height:44px!important;padding:9px!important;color:var(--t)!important}
.jp-ex-row .jp-remove{min-height:44px!important;height:44px!important;width:40px!important}
.jp-profile-extra .jp-actions{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:12px!important;max-width:none!important;width:100%!important}
.jp-profile-extra .jp-actions>button{margin:0!important;min-height:46px!important;width:100%!important;white-space:normal!important;padding:10px 12px!important;font-size:13px!important}
.jp-profile-extra>button{margin-top:12px!important;max-width:100%;min-height:46px!important}
/* Compact mobile Home: overview, not a second copy of all other tabs. */
.jf-f5-home{display:grid;gap:14px;padding-bottom:24px}
.jf-f5-home .jf-f5-greeting{display:flex;gap:13px;align-items:center;justify-content:space-between}
.jf-f5-home .jf-f5-greeting h1{font-size:clamp(24px,6.8vw,31px);line-height:1.18;margin:4px 0;color:var(--t);letter-spacing:-.03em}
.jf-f5-greeting>button{display:grid;place-items:center;flex:0 0 45px;height:45px;border-radius:12px!important;background:var(--card)!important;border:1px solid var(--line)!important;color:var(--t)!important;font-size:21px}
.jf-f5-greeting p{font-size:13px;margin:4px 0 0;color:var(--t2)}
.jf-f5-kicker{color:var(--a);font-weight:800;letter-spacing:.065em;font-size:10px}
.jf-f5-today{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:18px;display:grid;gap:8px}
.jf-f5-today>h2{font-size:18px;line-height:1.25;margin:2px 0;color:var(--t)}
.jf-f5-main-number{font-size:clamp(30px,8vw,42px);font-weight:800;color:var(--t);letter-spacing:-.04em;line-height:1.12}
.jf-f5-today>p{margin:0;color:var(--t2);font-size:13px;line-height:1.5}
.jf-f5-today>button{margin-top:8px;width:100%;min-height:45px}
.jf-f5-home-stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.jf-f5-home-stats button{min-width:0;display:grid;gap:7px;align-content:start;text-align:left;padding:16px!important;border-radius:15px!important;background:var(--card)!important;color:var(--t)!important;border:1px solid var(--line)!important;min-height:115px}
.jf-f5-home-stats button span{font-size:12px;color:var(--t2)}
.jf-f5-home-stats button strong{font-size:clamp(18px,5vw,23px);font-weight:750;color:var(--t);overflow-wrap:anywhere}
.jf-f5-home-stats button small{font-size:11px;color:var(--t2);line-height:1.45}
.jf-f5-home .jf-f5-shortcuts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.jf-f5-shortcuts button{border:1px solid var(--line)!important;background:var(--soft)!important;color:var(--t)!important;border-radius:11px!important;min-height:48px!important;padding:9px!important;font-weight:750;font-size:13px!important}
.jf-f5-ranking-link{padding:16px!important;margin-bottom:14px!important;display:flex;align-items:center;justify-content:space-between;gap:12px}
.jf-f5-ranking-link h2{font-size:18px;margin:0 0 4px}.jf-f5-ranking-link p{margin:0;font-size:12px;line-height:1.5;color:var(--t2)}
.jf-f5-ranking-link button{flex:none;min-height:44px}
/* Chart keeps entire SVG aligned within its card on narrow screens. */
.jf-result-chart{min-width:0!important;overflow:hidden!important}
.jf-result-chart .jf-chart-scroll{overflow:hidden!important;max-width:100%!important;width:100%!important;margin:12px 0!important}
.jf-result-chart svg.jf-weight-svg{display:block!important;width:100%!important;min-width:0!important;max-width:100%!important;height:auto!important;min-height:0!important;overflow:visible!important;margin:0 auto!important}
.jf-result-chart .jf-chart-legend{display:flex;flex-wrap:wrap;gap:10px!important}
/* Account password toggle belongs INSIDE the input. */
#login .pwr{display:block;position:relative;min-width:0;width:100%;isolation:isolate}
#login .pwr input{display:block;width:100%!important;min-width:0!important;padding-inline-end:88px!important;box-sizing:border-box!important}
#login .pwr .eye{position:absolute!important;top:50%!important;right:6px!important;left:auto!important;transform:translateY(-50%)!important;z-index:2!important;margin:0!important;min-width:65px!important;min-height:35px!important;max-height:40px!important;padding:6px 9px!important;border-radius:7px!important;font-size:12px!important;font-weight:700!important;line-height:1.1!important;box-shadow:none!important;background:#eaecef!important;color:#27343c!important;border:0!important}
:root[data-theme="dark"] #login .pwr .eye{background:#3a4452!important;color:#fff!important}
/* Fixed tab bar must never cover action fields or the app body. */
@media(max-width:959px){
 #app{padding-bottom:calc(114px + env(safe-area-inset-bottom,0px))!important}
 #app .jf-screen{padding-bottom:26px!important}
 #nav{display:flex!important;align-items:stretch!important;justify-content:space-evenly!important;gap:3px!important;bottom:calc(8px + env(safe-area-inset-bottom,0px))!important;left:12px!important;right:12px!important;width:calc(100% - 24px)!important;max-width:700px!important;margin:0 auto!important;padding:6px!important;border-radius:17px!important}
 #nav.hide{display:none!important}
 #nav .jf-nav-brand{display:none!important}
 #nav button{flex:1 1 20%!important;min-width:0!important;max-width:20%!important;min-height:56px!important;display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;gap:4px!important;padding:5px 0!important;margin:0!important;border-radius:12px!important;font-size:10px!important;line-height:1.15!important;white-space:normal!important;text-align:center!important}
 #nav button b{display:grid!important;place-items:center!important;width:22px!important;height:22px!important}
 #nav button b svg{width:21px!important;height:21px!important}
 #nav button[onclick="go('jejum')"],#nav button[onclick="go('ranking')"],#nav button[onclick="go('recompensas')"],#nav button[onclick="go('perfil')"],#nav button[onclick="go('admin')"]{display:none!important}
 #nav button[onclick="go('desemp')"]{display:flex!important}
 #nav button.on{background:#954325!important;color:#fff!important;box-shadow:none!important}
 #nav button.on b{color:#fff!important}
 #app .jf-vivo-home{gap:12px!important}
 #app .jf-e4-readiness{margin:0!important}
 #app .jf-water .jf-page-header h1{line-height:1.16!important}
 .jf-result-metrics .jf-metric{background:var(--card)!important;color:var(--t)!important;border:1px solid var(--line)!important}
 .jf-result-metrics .jf-metric>strong{color:var(--t)!important}
 .jf-result-metrics .jf-metric>span,.jf-result-metrics .jf-metric>small{color:var(--t2)!important}
 .jp-profile-extra .jp-actions{grid-template-columns:1fr!important}
 .jp-ex-row{grid-template-columns:repeat(6,minmax(0,1fr))!important;gap:10px!important;padding:14px!important;align-items:end!important}
 .jp-ex-row .jp-ex-name{grid-column:1/-1!important}
 .jp-ex-row>label:nth-of-type(2){grid-column:1/4!important}
 .jp-ex-row>label:nth-of-type(3){grid-column:4/5!important}
 .jp-ex-row>label:nth-of-type(4){grid-column:5/6!important}
 .jp-ex-row .jp-remove{grid-column:6/7!important;width:100%!important}
 .jp-ex-row label{min-width:0!important;font-size:12px!important}
 .jp-ex-row input,.jp-ex-row select{font-size:16px!important;min-height:45px!important}
 .jp-ex-row>label:nth-of-type(3) input,.jp-ex-row>label:nth-of-type(4) input{text-align:center;padding:6px!important}
 .jp-ex-suggestions{margin-top:20px}
 .jp-suggestion-list{grid-template-columns:1fr!important}
 .jp-wizard-top{grid-template-columns:1fr}
 #intro .jp-summary-onboard .jp-rec-results{grid-template-columns:1fr!important;gap:10px!important}
 #intro .jp-summary-onboard .jp-rec-results>div{padding:14px!important}
 #intro .jp-summary-onboard .jp-goals-inputs{grid-template-columns:1fr 1fr!important;gap:10px}
 #intro .jp-summary-onboard .jp-goals-inputs input{font-size:14px!important;padding:9px!important}
 #intro .jp-summary-onboard .ob-shell{padding-bottom:calc(25px + env(safe-area-inset-bottom,0px))}
 #intro .jp-summary-onboard .ob-content{padding-top:25px!important;max-width:100%!important}
 .jf-f5-ranking-link{flex-wrap:wrap}.jf-f5-ranking-link button{width:100%}
}
@media(max-width:390px){
 #app .jf-e4-pending{grid-template-columns:1fr!important;gap:9px!important;padding:16px!important}
 #app .jf-e4-pending-icon{width:33px;height:33px}
 .jf-f5-home-stats{gap:9px}.jf-f5-home-stats button{padding:12px!important}
 .jp-ex-row{gap:6px!important;padding:10px!important}
 .jp-wizard-week{gap:3px!important}
 #nav{left:7px!important;right:7px!important;width:calc(100% - 14px)!important}
 #nav button{font-size:10px!important}
}
@media(prefers-reduced-motion:reduce){#nav button,.jp-wizard-week button,.jf-f5-home button{transition:none!important}}
/* Hydration when the personalized goal IS set (the standard water screen). */
@media(max-width:700px){
 #app .jf-water-layout{min-width:0;display:grid;grid-template-columns:minmax(0,1fr)!important;gap:14px!important}
 #app .jf-water-hero{padding:20px!important;min-height:245px!important;max-width:100%;isolation:isolate}
 #app .jf-water-hero>h2{font-size:clamp(40px,10vw,56px)!important;line-height:1.1!important;max-width:100%;position:relative;z-index:2}
 #app .jf-water-hero>h2 small{font-size:13px!important;line-height:1.45!important;display:block;margin-top:8px}
 #app .jf-water-hero>p,#app .jf-water-hero .jf-water-goal{font-size:14px!important;line-height:1.55!important;max-width:76%!important;position:relative;z-index:2}
 #app .jf-water-hero .jf-progress{max-width:76%!important;position:relative;z-index:2}
 #app .jf-water-illustration{width:49%!important;max-width:190px!important;right:-28px!important;bottom:-25px!important;opacity:.42!important;z-index:0}
 #app .jf-water-register{min-width:0;padding:18px!important}
 #app .jf-water-actions{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px}
 #app .jf-water-actions button{min-width:0;max-width:100%;min-height:70px!important;padding:12px!important}
 #app .jf-water-actions button span{overflow-wrap:anywhere}
 #app .jf-result-metrics{min-width:0!important}
 #app .jf-result-metrics .jf-metric{min-width:0;overflow:hidden!important}
}
/* Critical: a sheet is above the persistent bottom navigation, never behind it. */
#sh .sheet{z-index:120!important}
body:has(#sh .sheet) #nav{visibility:hidden!important;pointer-events:none!important}
@media(max-width:959px){
 #sh .jf-journey-sheet .box{max-height:calc(100dvh - 28px)!important;overflow-y:auto!important;overscroll-behavior:contain!important;padding-bottom:calc(22px + env(safe-area-inset-bottom,0px))!important}
 #sh .jf-plan-modal .jp-modal-actions{position:sticky;bottom:calc(-14px - env(safe-area-inset-bottom,0px));background:var(--card);padding:14px 0 calc(12px + env(safe-area-inset-bottom,0px));margin-top:22px;z-index:5;box-shadow:0 -10px 18px -18px rgba(0,0,0,.3)}
 #sh .jf-plan-modal .jp-modal-actions button{flex:1 1 45%!important;min-height:47px!important;font-size:14px!important}
}

/* F7 is in mobile-f5.js but visually lives in a single final stylesheet (f7.css). */