/* ===========================================================================
   Sign in.
   ---------------------------------------------------------------------------
   Built on the welcome screen's stage on purpose: the same .wg2 field and the
   same drifting aura, defined once in welcome.css. Signing in then dissolves
   into the greeting instead of cutting from a green template page to a white
   one - the background never moves, the card is replaced by a name.

   Everything specific to this page is .alog-*.
   =========================================================================== */

.alog {
  width: 100%; max-width: 380px;
  display: flex; flex-direction: column; align-items: center;
  animation: wg2-rise .7s both cubic-bezier(.2, .9, .3, 1);
}

.alog-logo { width: 210px; max-width: 70%; height: auto; margin-bottom: 26px; }

.alog-h {
  margin: 0; font-size: clamp(30px, 5vw, 38px); font-weight: 700;
  letter-spacing: -.035em; color: #1D1D1F; line-height: 1.05;
}
.alog-sub { margin: 10px 0 30px; font-size: 15px; line-height: 1.45; color: #6E6E73; max-width: 330px; }

.alog-form { width: 100%; display: flex; flex-direction: column; gap: 10px; }

/* The same pill as the welcome screen's name field. */
.alog-field {
  display: flex; align-items: center; gap: 8px;
  padding: 0 8px 0 18px; height: 52px; border-radius: 999px;
  background: rgba(255, 255, 255, .8);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  box-shadow: 0 10px 40px rgba(0, 0, 0, .06), inset 0 0 0 1px rgba(0, 0, 0, .08);
  transition: box-shadow .2s;
}
.alog-field:focus-within { box-shadow: 0 10px 40px rgba(0, 0, 0, .1), inset 0 0 0 2px #10B981; }
.alog-field > i { color: #AEAEB2; font-size: 18px; flex-shrink: 0; }
.alog-field input {
  flex: 1; min-width: 0; border: 0; outline: 0; background: transparent;
  font: inherit; font-size: 16px; font-weight: 500; color: #1D1D1F; letter-spacing: -.1px;
}
.alog-field input::placeholder { color: #AEAEB2; font-weight: 400; }
/* Chrome paints autofilled inputs a hard blue. An inset shadow the size of the
   field is the only thing that reliably covers it without !important wars. */
.alog-field input:-webkit-autofill {
  -webkit-text-fill-color: #1D1D1F;
  -webkit-box-shadow: 0 0 0 40px #fff inset;
  transition: background-color 9999s;
}

/* Reveal, inside the pill, where the addon icon used to be. */
.alog-eye {
  flex-shrink: 0; width: 38px; height: 38px; border-radius: 50%; border: 0;
  background: transparent; color: #86868B; font-size: 17px;
}
.alog-eye:hover { background: rgba(0, 0, 0, .05); color: #1D1D1F; }

.alog-go {
  margin-top: 8px; height: 52px; border: 0; border-radius: 999px; width: 100%;
  background: #059669; color: #fff; font-size: 16px; font-weight: 600; letter-spacing: -.1px;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  box-shadow: 0 10px 26px rgba(5, 150, 105, .28);
  transition: transform .15s, background .2s, box-shadow .2s;
}
.alog-go:hover:not(:disabled) { background: #047857; transform: translateY(-1px); }
.alog-go:active:not(:disabled) { transform: translateY(0) scale(.99); }
.alog-go:disabled { background: #D2D2D7; color: #fff; box-shadow: none; cursor: default; }

.alog-err {
  width: 100%; margin-top: 4px; padding: 11px 15px; border-radius: 14px;
  background: rgba(255, 59, 48, .09); color: #D70015;
  font-size: 13.5px; line-height: 1.45; white-space: pre-line; text-align: left;
}

.alog-note { margin: 26px 0 0; font-size: 12.5px; line-height: 1.5; color: #86868B; max-width: 320px; }

@media (max-width: 480px) {
  .alog-logo { margin-bottom: 20px; }
  .alog-field { height: 50px; }
}

@media (prefers-reduced-motion: reduce) {
  .alog { animation: none; }
}