/* Sign in, sign up, reset and the email links (src/views.ts authPage and
   expiredLinkPage). The shared pieces (.auth, .auth-card, .field, .pw-eye)
   are in site.css. */

/* The error or good-news line keeps one line's height even when empty, so a
   message never pushes the button down under the pointer. The negative margin
   keeps the card's rhythm the same as before. */
.auth-msg { min-height: 21px; margin-block: -6px; display: grid; }
.auth-msg .form-error, .auth-msg .form-ok { line-height: 21px; }
.auth-hint { margin-top: -10px; }
.auth-terms { margin-top: -6px; }
.auth-card .center a { display: inline-block; }
@media (pointer: coarse) {
  /* Footer links are 44px tall on touch screens without moving the text. */
  .auth-card .center a, .auth-card .center .link-btn { padding-block: 11px; margin-block: -11px; }
}

/* An expired or spent link: said up front, with the way to a new one. */
.auth-expired { text-align: left; }
.auth-badge { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: var(--warn-bg); color: var(--warn-fg); border: 1px solid var(--warn-line); }
.auth-expired p { line-height: 1.6; }
@media (pointer: coarse) { .auth-card .pw-eye { width: 44px; height: 44px; right: 1px; } }