/* The client portal as an app: the "Get the mobile app" page (portal/app.html) and the sheet on the sign-in page
   that offers it on a phone (portal/login.html). Shown and hidden by static/js/portal-app.js. */

.app-get-head { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-4); }
.app-get-head h1, .app-get-head h2 { margin: 0 0 var(--space-0-5); }
.app-get-head p { margin: 0; }
.app-icon { flex-shrink: 0; border-radius: 22%; box-shadow: var(--shadow-sm); }
.app-get-done { padding: var(--space-2-5) var(--space-4); border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-2); }
.app-steps { margin-top: var(--space-4); }
.app-steps h2 { margin: 0 0 var(--space-1-5); font-size: var(--text-base); }
.app-steps ol { margin: 0 0 var(--space-1); padding-left: var(--space-5); }
.app-steps li { margin: 3px 0; }
.app-steps + p { margin-top: var(--space-4); }
[data-app-install][hidden], [data-app-installed][hidden], .app-steps[hidden] { display: none; }
[data-app-install] { margin-bottom: var(--space-1); }

.app-sheet { position: fixed; inset: 0; z-index: 60; display: flex; align-items: flex-end; justify-content: center; }
.app-sheet[hidden] { display: none; }
.app-sheet-backdrop { position: absolute; inset: 0; background: var(--backdrop); opacity: 0; transition: opacity 0.22s ease; cursor: pointer; }
.app-sheet-body {
  position: relative; width: 100%; max-width: 480px; padding: 22px 20px calc(20px + env(safe-area-inset-bottom));
  border-radius: var(--radius-lg) var(--radius-lg) 0 0; background: var(--surface); color: var(--text);
  box-shadow: var(--shadow-lg); transform: translateY(100%); transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.app-sheet-body:focus { outline: none; }
.app-sheet.is-open .app-sheet-backdrop { opacity: 1; }
.app-sheet.is-open .app-sheet-body { transform: none; }
.app-sheet-view { display: flex; flex-direction: column; gap: var(--space-2-5); animation: app-sheet-view 0.24s ease; }
.app-sheet-view[hidden] { display: none; }
.app-sheet-view h2 { margin: 0; font-size: var(--text-lg); }
.app-sheet-view > p { margin: 0 0 var(--space-1-5); }
.app-sheet-view .app-get-head { margin-bottom: var(--space-1-5); }
.app-sheet-view .btn { justify-content: center; min-height: 44px; }
.app-sheet-view .check { align-self: center; margin-top: var(--space-1); padding: var(--space-1-5) 0; color: var(--muted); }
@keyframes app-sheet-view { from { opacity: 0; transform: translateX(16px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .app-sheet-backdrop, .app-sheet-body { transition: none; }
  .app-sheet-view { animation: none; }
}