/* Centred "not found" empty state (components/empty-state.js, UX-082 / UX-098): retainers, people,
   organizations. 120px from the top of the main column, everything centred. */
:root {
  --es-top: 120px;
  --es-icon: 48px;
  --es-icon-color: var(--text-muted);
}
.es-not-found {
  display: flex; flex-direction: column; align-items: center; width: 100%; box-sizing: border-box;
  padding: var(--es-top) var(--sp-7) var(--sp-10); text-align: center;
  animation: es-in var(--t-med, 200ms) var(--ease-enter, ease-out);
}
.es-icon { width: var(--es-icon); height: var(--es-icon); color: var(--es-icon-color); margin-bottom: var(--sp-6); }
.es-icon svg { width: var(--es-icon); height: var(--es-icon); display: block; }
.es-title { margin: 0 0 var(--sp-3); font-size: var(--fs-xl); line-height: 28px; font-weight: var(--fw-semibold); color: var(--text); }
.es-text { margin: 0 0 var(--sp-7); max-width: 400px; font-size: var(--fs-md); line-height: var(--lh-md); color: var(--text-2); }
.es-btn { text-decoration: none; }
.es-btn:hover { text-decoration: none; }
.es-btn:focus-visible { outline: 2px solid var(--border-focus); outline-offset: 2px; }
@keyframes es-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .es-not-found { animation: none; } }