/* Shared primitive hooks. Layout and business state stay in page styles. */
.ui-button {
  min-height: var(--touch-target, 44px);
  border-radius: var(--ui-radius-sm, 8px);
  transition: background-color .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease;
}

.ui-button:focus-visible,
.ui-panel-heading :is(button, a):focus-visible {
  outline: 3px solid var(--ui-focus, #7869e6);
  outline-offset: 3px;
}

.ui-button__label { display: inline-flex; align-items: center; }
.ui-badge { border-radius: var(--ui-radius-sm, 8px); }

.ui-empty-state {
  display: grid;
  justify-items: center;
  gap: .65rem;
  color: var(--ui-muted, #746d83);
  text-align: center;
}

.ui-empty-state > [data-lucide] { width: 2rem; height: 2rem; color: var(--ui-accent, #6e5bd3); }
.ui-empty-state__title { color: var(--ui-ink, #211b2d); font-weight: 600; }
.ui-empty-state__description { margin: 0; max-width: 38rem; line-height: 1.6; }

.ui-panel-heading { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.ui-panel-heading__copy { min-width: 0; }
.ui-panel-heading__eyebrow { display: block; }
.ui-panel-heading__description { margin: .35rem 0 0; color: var(--ui-muted, #746d83); }