/* The sign-in screen: one centered column. While it shows, the page's
   other children are hidden. */
@layer views {
  body[data-signin] > :not(#signin),
  body[data-first-run] > :not(#first-run) { display: none !important; }
  .signin {
    display: grid;
    place-items: center;
    min-height: 100dvh;
    padding: max(24px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(24px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
  }
  .signin-form {
    display: grid;
    gap: 16px;
    width: 100%;
    max-width: 360px;
  }
  .signin-reason { margin: 0; text-wrap: pretty; }
}