/* ===== Empty State (spec §7.4: icon + message + CTA) ===== */
/* no-profile (profile/view.js), empty-section (security.js/social.js),
   no-people (people/list.js). Centered column; a sibling .add-btn / .btn acts
   as the CTA. .empty-state-sm is the compact in-group variant. */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  max-width: 420px;
  margin-inline: auto;
  padding: var(--space-8) var(--space-5);
  color: var(--text-secondary);
}
.empty-state-icon {
  font-size: 2.5rem;
  line-height: 1;
  margin-bottom: var(--space-3);
  color: var(--text-muted);
  opacity: 0.6;
}
.empty-state-text { font-size: var(--text-sm); line-height: 1.6; }
.empty-state-hint {
  margin-top: var(--space-2);
  font-size: var(--text-xs);
  color: var(--text-muted);
}
/* CTA spacing when a button is placed inside the empty state. */
.empty-state .btn, .empty-state .add-btn { margin-top: var(--space-4); width: auto; }

.empty-state-sm {
  padding: var(--space-5) var(--space-4);
}
.empty-state-sm .empty-state-icon { font-size: 1.75rem; }

/* ===== Utility ===== */
.hidden { display: none !important; }
.flex { display: flex; }
.flex-wrap { flex-wrap: wrap; }
.gap-4 { gap: var(--space-1); }
.gap-8 { gap: var(--space-2); }
.mt-8 { margin-top: var(--space-2); }
.mt-12 { margin-top: var(--space-3); }
.mb-8 { margin-bottom: var(--space-2); }
.mb-16 { margin-bottom: var(--space-4); }
.text-center { text-align: center; }