/* Account screens extend the existing Forma tokens; the dashboard and motion layer stay unchanged. */
body[data-auth=gate] .app-shell,body[data-auth=gate] .tabbar,body[data-auth=gate] .sidebar,body[data-auth=gate] .skip-link{display:none!important}
#account-root{position:fixed;inset:0;z-index:120;overflow:auto;background:var(--bg);color:var(--text);overscroll-behavior:contain}
#account-root[hidden]{display:none}
.account-page{width:min(100%,520px);margin:auto;padding:calc(28px + env(safe-area-inset-top)) 24px calc(36px + env(safe-area-inset-bottom));min-height:100dvh;animation:account-enter .35s ease-out}
.account-logo{display:flex;align-items:center;gap:10px;font-weight:750;font-size:27px;letter-spacing:-1.2px;margin-bottom:48px;width:max-content}
.account-logo img{border-radius:10px}
.account-page h1{font-size:36px;line-height:1.06;letter-spacing:-1.4px;margin:0 0 14px;font-weight:750}
.account-intro{color:var(--text-2);line-height:1.5;margin:0 0 28px}
.account-page form{display:grid;gap:18px}
.account-page label{display:grid;gap:8px;font-size:14px;font-weight:550;min-width:0}
.account-page input:not([type=checkbox]),.account-page select{width:100%;min-height:52px;min-width:0;padding:12px 14px;border:1px solid var(--sep);border-radius:14px;background:var(--card);color:var(--text);font-size:16px}
.account-page input:focus,.account-page select:focus{border-color:var(--accent)}
.account-page .btn,.account-welcome .btn{width:100%;min-height:52px;justify-content:center;border-radius:99px;font-weight:650}
.account-page>.btn{margin-top:14px}
.account-password{position:relative;display:block}
.account-password input{padding-right:88px!important}
.account-password button{position:absolute;right:8px;top:4px;min-height:44px;padding:0 8px;color:var(--accent);font-size:13px;font-weight:600}
.account-page [data-message]{font-size:14px;line-height:1.4;color:var(--accent)}
.account-page [data-message][data-error=true]{color:var(--red)}
.account-page [data-message]:empty{display:none}
.account-strength{margin-top:-8px;color:var(--text-2);font-size:12px;border-top:3px solid var(--fill-2);padding-top:8px}
.account-strength[data-level="3"],.account-strength[data-level="4"]{border-color:var(--accent)}
.account-link{display:block;color:var(--accent);margin:22px auto;padding:8px}
.account-switch{text-align:center;margin-top:30px;color:var(--text-2);font-size:15px}
.account-switch button{color:var(--accent);font-weight:600;padding:10px 2px}
.account-note{font-size:13px;color:var(--text-2);line-height:1.5}
.account-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.account-grid label:last-child:nth-child(odd){grid-column:1/-1}
.account-page fieldset{border:0;padding:0;margin:0}
.account-page legend{font-size:14px;margin-bottom:12px;font-weight:600}
.account-choice{display:flex!important;align-items:center;gap:10px!important;padding:14px;background:var(--card);border:1px solid var(--sep);border-radius:14px;line-height:1.35;cursor:pointer}
.account-choice:has(input:checked){border-color:var(--accent);background:var(--workout-card)}
.account-choice input{accent-color:var(--accent);width:19px;height:19px;flex-shrink:0}
.account-page fieldset:not(.pantry-options){display:grid;gap:10px}
.pantry-options{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.account-eyebrow{font-size:12px;font-weight:650;letter-spacing:1.5px;text-transform:uppercase;color:var(--accent);margin-bottom:14px}
.account-steps{display:flex;gap:6px;margin:0 0 26px}
.account-steps span{height:4px;flex:1;border-radius:10px;background:var(--fill-2)}
.account-steps .done{background:var(--accent)}
.account-summary{padding:28px 22px;border-radius:24px;background:var(--card)}
.account-summary strong{display:block;font-size:36px;letter-spacing:-1.5px;margin-bottom:20px}
.account-summary strong small{font-size:18px;color:var(--text-2)}
.account-summary p{margin:8px 0;font-size:16px}
.account-welcome{position:relative;display:flex;flex-direction:column;min-height:100svh;width:min(100%,540px);margin:auto;padding:calc(28px + env(safe-area-inset-top)) 26px calc(36px + env(safe-area-inset-bottom));background:linear-gradient(180deg,rgba(0,0,0,.05),rgba(0,0,0,.35) 40%,#000 100%),var(--welcome-image,linear-gradient(155deg,#181614 15%,#5f371c 55%,#0b0b0b));background-size:cover;background-position:50% 40%;color:#fff}
.account-welcome .account-logo{margin-bottom:120px}
.welcome-copy{margin-top:auto}
.welcome-copy h1{font-size:clamp(48px,12vw,64px);line-height:1.02;letter-spacing:-2.5px;max-width:400px;margin:0 0 22px;font-weight:750}
.welcome-copy>p:not(.account-eyebrow){font-size:16px;color:#c4c4c7;line-height:1.5;margin-bottom:30px;max-width:390px}
.welcome-copy .btn{background:#bafd4f;color:#0a0a0a}
.account-panel{margin-top:18px}
.account-panel>p{color:var(--text-2);font-size:14px;margin:8px 0;overflow-wrap:anywhere}
.account-panel [data-status=error],.account-panel [data-status=conflict]{color:var(--orange)}
.account-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
.account-actions .btn{font-size:13px}
@keyframes account-enter{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.account-page{animation:none}}
/* Opening photo: full-bleed behind the welcome, darkened where the text sits. */
.account-welcome.has-photo{width:100%;max-width:none;isolation:isolate;overflow:hidden;background:#000;padding-left:max(26px,calc((100% - 540px)/2));padding-right:max(26px,calc((100% - 540px)/2))}
.welcome-photo{position:absolute;inset:0;z-index:-1;display:block}
.welcome-photo img{width:100%;height:100%;object-fit:cover;object-position:50% 30%;animation:welcome-zoom 16s ease-out both}
.welcome-photo::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.55) 0%,rgba(0,0,0,0) 22%,rgba(0,0,0,0) 40%,rgba(0,0,0,.72) 62%,#000 90%)}
.account-welcome.has-photo .welcome-copy{animation:account-enter .7s .1s cubic-bezier(.22,1,.36,1) both}
.account-welcome.has-photo .account-eyebrow{color:#bafd4f}
@keyframes welcome-zoom{from{transform:scale(1.08)}}
@media(prefers-reduced-motion:reduce){.welcome-photo img,.account-welcome.has-photo .welcome-copy{animation:none}}

/* Question cards reuse the existing colours, spacing and entrance animation. */
.account-choice{flex-direction:row!important;text-align:left}
.account-page input[type=radio]{width:19px;height:19px;min-height:19px;padding:0;accent-color:var(--accent);flex:0 0 19px}
.account-option span{display:grid;gap:5px}
.account-option strong{font-size:15px;font-weight:600}
.account-option small{font-size:13px;line-height:1.4;color:var(--text-2);font-weight:400}
.account-divider{display:flex;align-items:center;gap:14px;color:var(--text-2);font-size:12px;margin:24px 0}
.account-divider::before,.account-divider::after{content:'';flex:1;height:1px;background:var(--sep)}
.account-page .google-signin{display:flex;align-items:center;gap:10px;background:#fff;color:#3c4043;border:1px solid #dadce0;min-height:44px;font-size:14px;font-weight:500;box-shadow:none}
.account-page .google-signin svg{flex:none;width:20px;height:20px}
.account-page .google-signin:hover{background:#f8fafd;border-color:#d2d6dc}
.account-page .google-signin:focus-visible{outline:2px solid #4285f4;outline-offset:2px}
.pantry-catalog{display:grid;gap:24px}
.pantry-catalog fieldset{display:block!important}
.pantry-catalog [hidden],.account-page [hidden]{display:none!important}
.pantry-options{gap:8px}
.pantry-options .account-choice{padding:12px 10px;font-size:13px}
.account-page h1:focus{outline:none}
/* Grey placeholders shaped like Today while the account loads for the first time on a device. */
.app-skeleton{width:min(100%,560px);margin:0 auto;padding:calc(18px + env(safe-area-inset-top)) var(--gutter,20px) calc(120px + env(safe-area-inset-bottom));min-height:100dvh}
.bone{display:block;border-radius:10px;background:var(--fill);position:relative;overflow:hidden}
.bone::after{content:'';position:absolute;inset:0;transform:translateX(-100%);background:linear-gradient(90deg,transparent,rgba(255,255,255,.07),transparent);animation:bone 1.3s ease-in-out infinite}
body[data-theme=light] .bone::after{background:linear-gradient(90deg,transparent,rgba(255,255,255,.55),transparent)}
@keyframes bone{to{transform:translateX(100%)}}
.sk-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:6px 0 14px}
.sk-title{width:150px;height:36px;border-radius:12px}
.sk-actions{display:flex;gap:10px}
.sk-round{width:44px;height:44px;border-radius:50%}
.sk-line{height:14px;border-radius:7px;width:100%}
.sk-line.short{width:55%;margin-top:9px}
.sk-sub{width:46%;margin-bottom:20px}
.sk-chips{display:flex;gap:8px;margin-bottom:18px}
.sk-chip{width:72px;height:34px;border-radius:99px}
.sk-card{background:var(--card);border-radius:var(--radius,28px);padding:18px;margin-bottom:14px;display:grid;gap:18px}
.sk-card .bone{background:var(--fill)}
.sk-row{display:flex;align-items:center;gap:14px}
.sk-row>span{flex:1;min-width:0}
.sk-dot{width:38px;height:38px;border-radius:50%;flex:none}
.sk-tabbar{position:fixed;left:50%;bottom:calc(14px + env(safe-area-inset-bottom));transform:translateX(-50%);width:min(92%,420px);height:64px;border-radius:99px}
@media(prefers-reduced-motion:reduce){.bone::after{animation:none}}
.boot{position:fixed;inset:0;z-index:110;background:var(--bg);overflow:hidden}