/* ==========================================================================
   css/account.css — account extras (DECISIONS 227): the "Forgot password?" link and the green
   notice on the (light) login card, the email dialog, the email row on the Trainer Card.
   The auth card itself lives in css/layout.css; its light colours are repeated here on purpose.
   ========================================================================== */

.auth-alert.ok { background: rgba(46, 160, 67, 0.14); color: #1f6b30; }
/* An admin's "Log out" (DECISIONS 518): a calm blue, not the green of good news and not the red of an error. */
.auth-alert.info { background: rgba(37, 99, 235, 0.12); color: #1e3a8a; }
.auth-alert-reason { margin-top: 4px; font-weight: 600; }
/* The password field's last line (js/ui/auth.js, DECISIONS 440): its error on the left, the link on
   the right - the link used to sit under the empty error line, far from the password box. */
.auth-pass-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 10px; }
/* Remember me on the same row (DECISIONS 549): the error, when there is one, takes its own line above it. */
.auth-pass-foot .error { flex: 1 0 100%; min-width: 0; }
.auth-pass-foot .error:empty { min-height: 0; }
.auth-remember {
  display: inline-flex; align-items: center; gap: 6px; margin-left: 2px;
  font-size: 0.8rem; font-weight: 600; color: var(--ink-soft, #55607a); cursor: pointer; user-select: none;
}
.auth-remember input { width: 15px; height: 15px; margin: 0; color-scheme: light; accent-color: var(--auth-blue, #2f6fd6); cursor: pointer; }   /* light: the card is light, the game is dark */
/* "Continue as <name>" in the idle-logout notice (DECISIONS 549). */
.auth-resume {
  display: block; margin-top: 8px; padding: 6px 12px; border: 0; border-radius: 8px;
  background: var(--auth-blue, #2f6fd6); color: #fff; font-weight: 700; cursor: pointer;
}
.auth-resume:hover { filter: brightness(1.08); }
.auth-forgot {
  flex: none; margin: 0 2px 0 auto;
  font-size: 0.8rem; font-weight: 600; color: var(--auth-blue, #2f6fd6); text-decoration: none;
}
.auth-forgot:hover { text-decoration: underline; }
.auth-note { margin: 0 0 10px; font-size: 0.82rem; line-height: 1.45; color: var(--ink-soft, #55607a); }
.auth-note.small { margin: 10px 0 0; font-size: 0.76rem; }

.email-dialog { display: grid; gap: 10px; }
.email-dialog p { margin: 0; }
.email-row { display: grid; gap: 4px; }
.email-label { font-size: 0.78rem; font-weight: 600; color: var(--muted); }
.email-dialog .error { min-height: 1.2em; color: var(--danger); font-size: 0.82rem; }

.profile-email { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 4px; }

/* "Invite a friend" on your own Trainer Card (DECISIONS 482, js/ui/profile.js invitePanel). */
.invite-panel p { margin: 0 0 6px; }
.invite-list { display: grid; gap: 6px; margin-top: 8px; }
.invite-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap;
  padding: 7px 10px; border-radius: var(--radius-sm); background: var(--panel-2); border: var(--panel-border); }
.invite-state { font-size: 0.85rem; color: var(--muted); }
.invite-state.done { color: var(--success); }
.invite-state.wait { color: var(--warning); }