/* css/profile.css - /profile (edit) and /u/:username (view). Stat panels,
   list containers and page width come from base.css. */

.profile-page .form { max-width: 480px; }
.profile-page .form .btn--primary { align-self: flex-start; }

.profile-view__header h1 { margin-bottom: var(--space-1); }

.profile-view__username {
  margin: 0 0 var(--space-5);
  color: var(--color-text-muted);
}

.profile-view__bio {
  max-width: 62ch;
  margin: 0 0 var(--space-5);
  white-space: pre-wrap;
}

.profile-view__loading { color: var(--color-text-muted); }

/* ── Linked accounts ──────────────────────────────────────────────────── */

.social-section {
  margin-top: var(--space-8);
  padding-top: var(--space-6);
  border-top: 1px solid var(--color-border);
}
.social-section h2 { margin-top: 0; }

.social-list__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: 12px var(--space-4);
}
.social-list--readonly .social-list__item { justify-content: flex-start; }
.social-list__item a {
  display: inline-flex;
  align-items: baseline;
  gap: var(--space-2);
  min-width: 0;
  color: var(--color-ink);
}
.social-list__item a:hover { text-decoration: none; }
.social-list__item a:hover .social-list__name { text-decoration: underline; }
.social-list__name { font-weight: 600; }
.social-list__platform { color: var(--color-text-muted); font-size: var(--font-size-sm); }

.social-list__remove {
  flex-shrink: 0;
  min-height: 30px;
  padding: 0 var(--space-3);
  background: transparent;
  border: 1px solid color-mix(in srgb, var(--color-danger) 40%, transparent);
  border-radius: var(--radius-sm);
  color: var(--color-danger);
  font-size: var(--font-size-sm);
  cursor: pointer;
}
.social-list__remove:hover { background: color-mix(in srgb, var(--color-danger) 8%, transparent); }

/* ── Activity feed on a public profile ────────────────────────────────── */

.activity-list__item {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  padding: 12px var(--space-4);
  font-size: var(--font-size-sm);
}

.activity-list__date {
  flex-shrink: 0;
  color: var(--color-text-subtle);
  font-size: var(--font-size-xs);
}

.social-section__hint { margin: -4px 0 var(--space-3); color: var(--color-text-muted); font-size: var(--font-size-sm); }