/* Standalone app only (html.app-mode): full-screen layout around the phone's notch and home bar, and sign-in. */
html.app-mode,html.app-mode body{overscroll-behavior:none}
html.app-mode main{padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
@media (max-width:759px){
  html.app-mode nav{padding-top:calc(6px + env(safe-area-inset-top,0px))}
  html.app-mode .capture{bottom:calc(14px + env(safe-area-inset-bottom,0px))}
  html.app-mode main{padding-bottom:calc(150px + env(safe-area-inset-bottom,0px))}
  html.app-mode .toast{top:calc(132px + env(safe-area-inset-top,0px))}
  html.app-mode .sheet{max-height:calc(100% - 140px - env(safe-area-inset-bottom,0px))}
  html.app-mode .scrim{padding-top:env(safe-area-inset-top,0px)}
}
@media (min-width:760px){
  html.app-mode nav{padding-top:calc(24px + env(safe-area-inset-top,0px));padding-left:max(12px,env(safe-area-inset-left,0px))}
  html.app-mode .capture{padding-bottom:calc(10px + env(safe-area-inset-bottom,0px))}
}

/* sign-in */
.login{position:fixed;inset:0;z-index:30;background:var(--paper);display:flex;align-items:center;justify-content:center;
  padding:calc(24px + env(safe-area-inset-top,0px)) 20px calc(24px + env(safe-area-inset-bottom,0px));overflow-y:auto}
.login[hidden]{display:none}
.login-card{width:100%;max-width:380px;display:flex;flex-direction:column;gap:14px}
.login-card h1{font-size:30px}
.login-mark{width:56px;height:56px;border-radius:14px;background:var(--accent);display:grid;place-items:center}
.login-mark svg{width:30px;height:30px;stroke:var(--accent-ink);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.login-card .field input{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:12px;width:100%;font-size:16px}
.login-card .btn{padding:14px 16px;font-size:16px}
.login-err{margin:0;min-height:1.4em;color:var(--crit);font-size:14px}