/* 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){
  /* iPhone draws a soft blurred band about 37pt deep under the status bar, coloured from the page background.
     The tab bar takes the same colour so the band blends in, and its icons start below the band.
     If icons still look blurred, raise the 32px. */
  html.app-mode nav{padding-top:calc(32px + env(safe-area-inset-top,0px));background:var(--paper)}
  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}