/* ============================================================================
   SIGNING IN — the sign-in and welcome pages, and the app's passkey offer.
   Built on app.css's tokens and its button and field styles, so the pages read
   as the same instrument as the app they lead into.
   ========================================================================== */

.auth-page {
  overflow: auto;
  min-height: 100%;
  display: grid;
  place-items: center;
  padding: 32px 16px;
}

.auth-card {
  width: min(420px, 100%);
  background: var(--ink-1);
  border: 1px solid var(--hair-strong);
  border-radius: 12px;
  padding: 26px 28px 24px;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.55);
}

.auth-brand { margin-bottom: 22px; }

.auth-title {
  margin: 0 0 14px;
  font-family: var(--font-d);
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--txt-0);
}

.auth-text { margin: 0 0 20px; font-size: 14px; line-height: 1.55; color: var(--txt-1); }
.auth-text strong { color: var(--txt-0); font-weight: 600; word-break: break-all; }

.auth-wide { width: 100%; }

.auth-or {
  display: flex; align-items: center; gap: 12px; margin: 18px 0;
  font-family: var(--font-m); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--txt-2);
}
.auth-or::before, .auth-or::after { content: ""; flex: 1; height: 1px; background: var(--hair); }

.auth-form { display: grid; gap: 8px; }
.auth-form .up-input { margin-bottom: 6px; }

/* the second action: outlined, so the passkey stays the obvious choice */
.auth-secondary {
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 600; letter-spacing: 0.02em; color: var(--txt-0);
  background: var(--ink-2); border: 1px solid var(--hair-strong); border-radius: 10px;
  padding: 10px 20px; transition: border-color 0.15s, background 0.15s;
}
.auth-secondary:hover { border-color: var(--det); }
.auth-secondary[aria-disabled="true"] { opacity: 0.6; pointer-events: none; }

.auth-text-btn {
  display: block; margin: 14px auto 0; padding: 4px 8px;
  background: none; border: none; color: var(--txt-1);
  font-size: 13px; text-decoration: underline; text-underline-offset: 3px;
}
.auth-text-btn:hover { color: var(--txt-0); }

.auth-check {
  display: flex; align-items: flex-start; gap: 10px; margin: 0 0 20px;
  font-size: 14px; line-height: 1.5; color: var(--txt-0); cursor: pointer;
}
.auth-check input { margin-top: 3px; width: 16px; height: 16px; accent-color: var(--det); flex: none; }

.auth-card a { color: var(--det); }
.auth-card a.btn-primary { color: var(--ink-0); }

.auth-foot {
  margin: 22px 0 0; padding-top: 16px; border-top: 1px solid var(--hair);
  font-size: 13px; color: var(--txt-2); text-align: center;
}

/* ------------------------------------------------ the app's topbar and passkey offer */
.topbar-account { margin-left: auto; }
.sign-out {
  font-family: var(--font-m); font-size: 11.5px; color: var(--txt-1);
  border: 1px solid var(--hair); border-radius: 6px; padding: 4px 10px; background: var(--ink-1);
  transition: border-color 0.2s, color 0.2s;
}
.sign-out:hover { border-color: var(--hair-strong); color: var(--txt-0); }

.passkey-offer {
  position: fixed; right: 20px; bottom: 20px; z-index: 70;
  width: min(340px, calc(100vw - 40px));
  background: var(--ink-1); border: 1px solid var(--hair-strong); border-radius: 12px;
  padding: 16px 18px; box-shadow: 0 18px 48px rgba(0, 0, 0, 0.5);
}
.passkey-offer-title { margin: 0 0 6px; font-size: 14px; font-weight: 700; color: var(--txt-0); }
.passkey-offer-text { margin: 0 0 14px; font-size: 13px; line-height: 1.5; color: var(--txt-1); }
.passkey-offer-actions { display: flex; align-items: center; gap: 10px; }
.passkey-offer-actions .btn-primary { padding: 8px 14px; font-size: 13px; }
.passkey-offer-actions .auth-text-btn { margin: 0; }