/* The single-card pages: sign in, accept an invitation, ask for a reset, set a
   new password.

   One file because there are four of them now. The first two carried their own
   copy of these rules inline, which was fine at two and is how the third and
   fourth end up subtly different from each other - a card 8px wider here, a
   heading a size out there, on pages a client sees before anything else. */

.signin { min-height: 100vh; display: grid; place-items: center; padding: 40px 20px; }

.signin__card {
  width: min(420px, 100%); padding: 32px;
  background: var(--navy-700); border: 1px solid var(--line);
  border-radius: var(--radius); text-align: left;
}
.signin__card img { display: block; width: 210px; height: auto; margin: 0 auto 22px; }

.signin h1 { margin: 0 0 6px; font-size: 24px; }
.signin .lede { margin: 0 0 22px; color: var(--muted); font-size: 14px; line-height: 1.55; }

.signin label { display: block; font-size: 13px; font-weight: 700; margin-bottom: 6px; }
.signin input {
  width: 100%; box-sizing: border-box; padding: 11px 12px; border-radius: 10px;
  border: 1px solid var(--line); background: rgb(255 255 255 / .04);
  color: var(--ink); font: inherit;
}
.signin input:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

.signin .btn { width: 100%; justify-content: center; margin-top: 18px; }

.signin__err {
  margin: 0 0 16px; padding: 10px 12px; border-radius: 8px; font-size: 14px;
  background: rgb(210 69 59 / .14); border: 1px solid rgb(210 69 59 / .4);
}
.signin__hint { margin: 6px 0 0; font-size: 12px; color: var(--muted); line-height: 1.5; }

/* Quiet, and below the button. It is the way out of a problem, not one of the
   two things somebody came here to do. */
.signin__aside { margin: 18px 0 0; text-align: center; font-size: 13px; }
.signin__aside a { color: var(--muted); }
.signin__aside a:hover { color: var(--accent); }