/*
 * FB-03 Empty state — app/components/ui/empty_state_component.rb
 *
 * Centred, --space-10 vertical padding, 56px icon in an 88px --radius-round
 * --color-surface-inset frame, --text-lg/600 heading, --text-sm/ink-muted
 * body capped at 42ch. `inline` drops the icon and shrinks the padding for
 * empty cards inside an otherwise populated page. `blocked` tints danger.
 */

.ui-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: var(--space-10) var(--space-6);
  gap: var(--space-3);
}

.ui-empty-state--inline {
  padding: var(--space-4);
  gap: var(--space-2);
}

.ui-empty-state__icon-frame {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 88px;
  height: 88px;
  border-radius: var(--radius-round);
  background: var(--color-surface-inset);
  color: var(--color-ink-soft);
  margin-bottom: var(--space-2);
}

.ui-empty-state--blocked .ui-empty-state__icon-frame {
  background: var(--color-danger-subtle);
  color: var(--color-danger);
}

.ui-empty-state__icon-frame svg {
  display: block;
}

.ui-empty-state__heading {
  font-family: var(--font-sans);
  font-size: var(--text-lg);
  line-height: var(--text-lg--line-height);
  font-weight: 600;
  color: var(--color-ink);
}

.ui-empty-state--inline .ui-empty-state__heading {
  font-size: var(--text-base);
  line-height: var(--text-base--line-height);
}

.ui-empty-state__body {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  line-height: var(--text-sm--line-height);
  color: var(--color-ink-muted);
  max-width: 42ch;
}

.ui-empty-state__query {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  line-height: var(--text-sm--line-height);
  font-weight: 500;
  color: var(--color-ink);
}

.ui-empty-state__actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-2);
}