/* The v3 sign-in page (finding 12, public/v3/signin.html): the onboarding hello screen's look
   (ob-hello.png: the faced orb, a display line, her lead on the grey ground) with the two ways in.
   Tokens only, so dark is the token swap of v3.css (G2). The two ways in are full-width 50 px pills,
   equal to each other: DESIGN.md G4 names this screen as the one place outside onboarding that gets
   them. No inline styles (CSP). */

.n-si { max-width: var(--n-col); min-height: 100dvh; margin: 0 auto; display: flex; flex-direction: column;
  padding: calc(var(--sat) + 72px) 24px calc(var(--sab) + 28px); }

.n-si-hero { display: flex; flex-direction: column; align-items: center; text-align: center; }
.n-si-hero .orb { width: 96px; height: 96px; }
.n-si-word { margin-top: 26px; } /* the display size (G5: 32 px), as the onboarding question */
.n-si-hero .n-lead { margin-top: 10px; max-width: 30ch; text-wrap: balance; }

/* The two ways in (AC-ONBOARD-1): an email one-time code and Google, both links that start the sign-in at
   the control plane. ONE pill in two places: same width, height and radius, so they sit as equals. */
.n-si-cta { width: 100%; height: 50px; border-radius: var(--n-r-pill); border: 1px solid transparent;
  background: var(--n-ink); color: var(--n-card); font: 600 var(--n-fs-body)/1 var(--n-font); text-align: center;
  display: grid; place-items: center; text-decoration: none; transition: opacity .2s var(--n-ease), scale .2s var(--n-ease); }
.n-si-cta:active { scale: .97; }

#signin-email { margin-top: 34px; }
#signin-google { margin-top: 12px; }
/* signin.lead breaks on its \n as the markup's <br> does, with no innerHTML */
#signin-lead { white-space: pre-line; }

.n-si-note { margin-top: auto; padding-top: 40px; text-align: center; font-size: var(--n-fs-meta); line-height: 1.4; color: var(--n-soft); }

@media (prefers-reduced-motion: reduce) {
  .n-si-cta { transition: none; }
}