/* 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, pill fields on the grey ground) with the
   sign-in form. 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 and to the fields: DESIGN.md G4 names this screen as the one place
   outside onboarding that gets them, because the founder made Google the main way in and the two had
   to be able to sit as equals. 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; }

.n-si-form { margin-top: 18px; display: grid; gap: 12px; }
.n-si-input { width: 100%; height: 50px; padding: 0 20px; border-radius: var(--n-r-pill); border: 1px solid var(--n-hair);
  background: var(--n-card); color: var(--n-ink); font-size: var(--n-fs-body); outline: none; -webkit-appearance: none; appearance: none; }
.n-si-input::placeholder { color: var(--n-faint); opacity: 1; }
/* the focus ring of D13 (2 px brand ink) laid over the field's own edge: one ring, not two */
.n-si-input:focus-visible { outline: 2px solid var(--n-brand-ink); outline-offset: -1px; }

/* what went wrong: ink at full contrast, the orange dot of "this needs you" in front */
#signin-error { text-align: center; text-wrap: balance; padding: 2px 8px 0; font-size: var(--n-fs-sec); line-height: 1.4; color: var(--n-ink); }
#signin-error::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 8px; border-radius: 50%; background: var(--n-brand); vertical-align: 2px; }

/* The two ways in are ONE button in two roles (founder, 2026-10-04: "the buttons don't have equal
   size" and "auth with Google should be the main login way"). Same width as the fields they sit
   with, same height, same radius: the only difference between them is which is filled.

   They were not equal before because #signin-go sat inside the form's grid with justify-self:center
   and sized to its word, while Google sat outside it and stretched -- two rules that happened to
   disagree rather than a decision. */
.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; transition: opacity .2s var(--n-ease), scale .2s var(--n-ease); }
.n-si-cta:active:not(:disabled) { scale: .97; }
.n-si-cta:disabled { opacity: .6; }

#signin-google { margin-top: 34px; }
#signin-go { margin-top: 6px; }

/* With Google on the page it is the filled one and Continue is the outline. With Google off (no
   public token on this server) Continue is the only way in, and keeps the filled look by default:
   a screen with one action should not make that action look secondary. */
.n-si.has-google #signin-go { background: var(--n-card); color: var(--n-ink); border-color: var(--n-hair2); }

/* the rule spans the same width as the two pills: a divider that stops short of what it divides
   reads as a third, narrower element */
.n-si-or { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px;
  margin: 14px 0 0; width: 100%; font-size: var(--n-fs-meta); color: var(--n-soft); }
.n-si-or::before, .n-si-or::after { content: ''; height: 1px; background: var(--n-hair2); }

/* The quiet ways through: a reset, and the other half of the screen. Buttons, not anchors, because
   they do not navigate; they are styled down so neither competes with the two pills. */
/* the two of them read as one group: a gap before the first, almost none between them */
.n-si-ways { margin: 10px 0 0; text-align: center; }
.n-si-ways + .n-si-ways { margin-top: 0; }
.n-si-link { font-size: var(--n-fs-meta); color: var(--n-soft); text-decoration: underline; text-underline-offset: 3px;
  padding: 6px 8px; min-height: var(--n-hit); }
.n-si-link:active { opacity: .7; }

.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; }
}