/* Composite patterns: the catalog item card and the empty state.
   These appear in every app, so they are components rather than per-app markup. */
.orka-entity { display: flex; flex-direction: column; gap: var(--space-2-5); }
.orka-entity__top { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.orka-entity__id { font-size: var(--fs-2xs); font-weight: var(--fw-bold); letter-spacing: 0.06em; color: var(--text-tertiary); font-variant-numeric: tabular-nums; }
.orka-entity__spacer { flex: 1; }
.orka-entity__title { font-size: var(--fs-md); font-weight: var(--fw-bold); letter-spacing: -0.01em; line-height: 1.35; color: var(--text-primary); }
.orka-entity__meta { display: flex; align-items: center; gap: var(--space-2); padding-top: var(--space-2-5); box-shadow: inset 0 1px 0 var(--border-subtle); }
.orka-entity__channel { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--fs-sm); color: var(--text-secondary); }
.orka-entity__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--chart-1); flex: none; }
.orka-entity__actions { margin-left: auto; display: inline-flex; gap: var(--space-1); }

/* Health pill: dot + score. Threshold decides the tone, never the author. */
.orka-health { display: inline-flex; align-items: center; gap: var(--space-1); padding: 3px var(--space-2); border-radius: var(--radius-pill); font-size: var(--fs-2xs); font-weight: var(--fw-bold); font-variant-numeric: tabular-nums; }
.orka-health__dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.orka-health--good { background: var(--success-subtle); color: var(--success-text); }
.orka-health--warn { background: var(--warning-subtle); color: var(--warning-text); }
.orka-health--bad { background: var(--error-subtle); color: var(--error-text); }

.orka-empty { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--space-3); padding: var(--space-8) var(--space-4); max-width: 38ch; margin: auto; }
.orka-empty__icon { display: flex; align-items: center; justify-content: center; width: 88px; height: 88px; border-radius: var(--radius-lg); background: var(--bg-subtle); color: var(--text-tertiary); }
.orka-empty__icon svg { width: var(--icon-3xl); height: var(--icon-3xl); }
.orka-empty__title { font-size: var(--fs-2xl); font-weight: var(--fw-bold); letter-spacing: -0.012em; color: var(--text-primary); }
.orka-empty__body { font-size: var(--fs-base); line-height: 1.6; color: var(--text-secondary); }
.orka-empty__actions { display: flex; gap: var(--space-2); margin-top: var(--space-1); }
.orka-empty--sm { padding: var(--space-5) var(--space-4); gap: var(--space-2-5); }
.orka-empty--sm .orka-empty__icon { width: 56px; height: 56px; border-radius: var(--radius-md); }
.orka-empty--sm .orka-empty__icon svg { width: var(--icon-xl); height: var(--icon-xl); }
.orka-empty--sm .orka-empty__title { font-size: var(--fs-lg); }
.orka-empty--sm .orka-empty__body { font-size: var(--fs-sm); }