/* Signed-out screen of the INSTALLED app (account.html). The inline script in
   account.html adds .is-app to <html> only when the page runs as an installed
   app (home-screen icon). In a normal browser none of this applies. */

/* Sign-in band photo: a slim, wide shot (band turned level, short strip) so the
   screen needs less scrolling. Applies in the browser and the installed app. */
.auth-shell__hero{aspect-ratio:1200/575}
.auth-shell__hero img{object-fit:cover;transform:none}

/* App-only pieces stay hidden in the browser. */
.app-signin-logo,.app-signin-legal{display:none}

/* The page must never slide sideways. */
html.is-app,html.is-app body{overflow-x:clip;overscroll-behavior-x:none;touch-action:pan-y;max-width:100%}

/* Drop the website menu, mobile menu and big footer, unless the signed-in
   dashboard is showing (that view keeps the normal site chrome). */
html.is-app body:not(:has(#account-app:not([hidden]))) .nav,
html.is-app body:not(:has(#account-app:not([hidden]))) .mobile-menu,
html.is-app body:not(:has(#account-app:not([hidden]))) footer.sf{display:none !important}

/* Sit below the clock / above the home bar. */
html.is-app body:not(:has(#account-app:not([hidden]))) .pg-main{
  padding-top:calc(env(safe-area-inset-top,0px) + 16px);
  padding-bottom:calc(env(safe-area-inset-bottom,0px) + 22px);
}
html.is-app .pg-sec{padding-bottom:8px}

html.is-app .app-signin-logo{display:flex;justify-content:center;margin:0 0 22px}
html.is-app .app-signin-logo img{height:26px;width:auto}

html.is-app .app-signin-legal{
  display:flex;flex-wrap:wrap;justify-content:center;gap:8px 20px;margin:28px 0 0;
  font-size:12.5px;
}
html.is-app .app-signin-legal a{color:var(--fg-muted);text-decoration:underline;text-underline-offset:3px}

/* Installed app: tighten the vertical spacing so the whole sign-in fits one screen. */
html.is-app .app-signin-logo{margin-bottom:12px}
html.is-app .auth-shell__hero-wrap{margin-bottom:12px}
html.is-app .auth-title{font-size:clamp(40px,11vw,52px);margin-bottom:8px}
html.is-app .auth-shell__lede{margin-bottom:12px}
html.is-app .auth-card{padding:32px 28px 20px}
html.is-app .auth-card .form-msg:empty{display:none}
html.is-app .auth-shell__new{margin-top:12px}
html.is-app .app-signin-legal{margin-top:14px}