/* Account page — create + manage your Retenir account.
 * Reuses the marketing site's tokens (--accent, --bg-*, --border, --text-*,
 * --radius-*, --s-*, --font-*) so it tracks the light/dark theme toggle. */

.acct-section {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 7rem var(--container-padding-x) 4rem;
}

.acct-container {
  width: 100%;
  max-width: 27rem;
}

.acct-card {
  background: var(--bg-secondary);
  border: 1px solid var(--border-accent);
  border-radius: var(--radius-lg);
  padding: var(--s-10) var(--s-8);
  box-shadow: 0 20px 60px -24px rgba(0, 0, 0, 0.6);
}

.acct-state { display: flex; flex-direction: column; gap: var(--s-4); }

/* ── Loading ─────────────────────────────────────────────────────────── */
.acct-loading {
  align-items: center;
  text-align: center;
  color: var(--text-secondary);
  padding: var(--s-8) 0;
}
.acct-spinner {
  width: 1.6rem;
  height: 1.6rem;
  border-radius: 50%;
  border: 2px solid var(--border-accent);
  border-top-color: var(--accent);
  animation: acct-spin 0.7s linear infinite;
}
@keyframes acct-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .acct-spinner { animation: none; } }

/* ── Signed-out head ─────────────────────────────────────────────────── */
.acct-brand {
  width: 56px;
  height: 56px;
  margin: 0 auto var(--s-2);
  border-radius: var(--radius-md);
  background: var(--accent-subtle);
  display: flex;
  align-items: center;
  justify-content: center;
}
.acct-brand img { width: 34px; height: 34px; }

.acct-title {
  font-size: var(--text-2xl);
  text-align: center;
  margin: 0;
}
.acct-subtitle {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  text-align: center;
  line-height: 1.5;
  margin: 0 0 var(--s-2);
}

/* ── Provider + action buttons ───────────────────────────────────────── */
.acct-providers-group { display: flex; flex-direction: column; gap: var(--s-3); }

.acct-provider {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  width: 100%;
  padding: var(--s-3) var(--s-4);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text-primary);
  background: var(--bg-elevated);
  border: 1px solid var(--border-accent);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background var(--transition-fast), border-color var(--transition-fast),
    transform 100ms var(--ease-out), opacity var(--transition-fast);
  min-height: 46px;
}
.acct-provider:hover:not(:disabled) { border-color: var(--accent); }
.acct-provider:active:not(:disabled) { transform: scale(0.98); }
.acct-provider:disabled { opacity: 0.55; cursor: not-allowed; }
.acct-provider svg { flex-shrink: 0; }

.acct-provider-apple { background: #000; color: #fff; border-color: rgba(255, 255, 255, 0.22); }
.acct-provider-apple:hover:not(:disabled) { background: #141414; border-color: rgba(255, 255, 255, 0.34); }

.acct-provider-github { background: #1b1f23; color: #fff; border-color: rgba(255, 255, 255, 0.16); }
.acct-provider-github:hover:not(:disabled) { background: #24292f; border-color: rgba(255, 255, 255, 0.3); }

.acct-provider-primary {
  background: var(--accent);
  color: var(--bg-primary);
  border-color: var(--accent);
}
.acct-provider-primary:hover:not(:disabled) {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
  box-shadow: 0 2px 16px var(--accent-glow);
}

/* ── Divider ─────────────────────────────────────────────────────────── */
.acct-divider {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-tertiary);
}
.acct-divider::before, .acct-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border-accent);
}

/* ── Email form ──────────────────────────────────────────────────────── */
.acct-email-form { display: flex; flex-direction: column; gap: var(--s-3); }
.acct-input {
  width: 100%;
  padding: var(--s-3) var(--s-4);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--text-primary);
  background: var(--bg-primary);
  border: 1px solid var(--border-accent);
  border-radius: var(--radius-sm);
  min-height: 46px;
  transition: border-color var(--transition-fast);
}
.acct-input::placeholder { color: var(--text-tertiary); }
.acct-input:focus-visible { outline: none; border-color: var(--accent); }

.acct-sent {
  font-size: var(--text-sm);
  color: var(--success);
  text-align: center;
  margin: 0;
}
.acct-error {
  font-size: var(--text-sm);
  color: #d98c6a;
  text-align: center;
  margin: 0;
}
.acct-note {
  font-size: var(--text-xs);
  color: var(--text-tertiary);
  text-align: center;
  margin: var(--s-2) 0 0;
}
.acct-note code {
  font-family: var(--font-mono);
  font-size: 0.9em;
  color: var(--text-secondary);
  background: var(--bg-elevated);
  padding: 0.1em 0.4em;
  border-radius: var(--radius-sm);
}

/* ── Signed-in ───────────────────────────────────────────────────────── */
.acct-identity { display: flex; align-items: center; gap: var(--s-4); }
.acct-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: var(--text-lg);
  color: var(--accent);
  background: var(--accent-subtle);
  border: 1px solid var(--border-accent);
  text-transform: uppercase;
}
.acct-identity-text { min-width: 0; }
.acct-identity-name {
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
}
.acct-identity-meta {
  font-size: var(--text-xs);
  color: var(--text-tertiary);
  font-family: var(--font-mono);
}

.acct-field { display: flex; flex-direction: column; gap: var(--s-2); }
.acct-field-label {
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-tertiary);
}
.acct-providers-list { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.acct-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--s-1);
  padding: 0.3rem 0.6rem;
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--text-secondary);
  background: var(--bg-elevated);
  border: 1px solid var(--border-accent);
  border-radius: 999px;
  text-transform: capitalize;
}

.acct-plan-row { display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap; }
.acct-upgrade-link {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--accent);
  text-decoration: none;
}
.acct-upgrade-link:hover { color: var(--accent-hover); }

.acct-actions {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  margin-top: var(--s-2);
}
.acct-actions .acct-provider { width: auto; flex: 1; }
.acct-delete {
  background: none;
  border: 1px solid transparent;
  color: var(--text-tertiary);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 600;
  padding: var(--s-3) var(--s-4);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: color var(--transition-fast), border-color var(--transition-fast);
}
.acct-delete:hover:not(:disabled) { color: #d98c6a; border-color: rgba(217, 140, 106, 0.4); }
.acct-delete:disabled { opacity: 0.55; cursor: not-allowed; }