/* Badges, tags, rating — status reads through fill vs. outline, not hue */

.badge { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 600; padding: 4px 10px; border-radius: var(--radius-pill); border: 1.3px solid transparent; }
.badge i { font-size: 13px; }
.badge-draft { background: transparent; border-color: var(--line-default); color: var(--ink-600); }
.badge-published { background: var(--ink-900); color: var(--paper); }
.badge-archived { background: var(--paper-sunken); color: var(--ink-500); }
.badge-pending { background: transparent; border-color: var(--ink-900); border-style: dashed; color: var(--ink-700); }
.badge-danger { background: var(--paper-raised); border-color: var(--ink-900); border-width: 2px; color: var(--ink-900); font-weight: 700; }
.badge-brand { background: var(--ink-900); color: var(--paper); }
.badge-outline { background: transparent; border-color: var(--line-default); color: var(--ink-700); }

.chip { display: inline-flex; align-items: center; gap: 6px; background: var(--paper-sunken); color: var(--ink-700); font-size: 12.5px; font-weight: 500; padding: 6px 12px; border-radius: var(--radius-pill); border: 1px solid transparent; }
.chip.removable { padding-right: 8px; }
.chip.removable button { border: none; background: var(--ink-200); width: 16px; height: 16px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; color: var(--ink-900); font-size: 10px; }
.chip.active { background: var(--ink-900); color: var(--paper); }
.chip i { font-size: 14px; }

.diet-tag { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 600; padding: 4px 9px; border-radius: 6px; background: transparent; border: 1px solid var(--line-default); color: var(--ink-700); }

.rating { display: inline-flex; gap: 2px; color: var(--ink-900); }
.rating i { font-size: 16px; }
.rating i.off { color: var(--ink-200); }
.rating.input i { cursor: pointer; color: var(--ink-200); }
.rating.input i.on { color: var(--ink-900); }
.rating-line { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--ink-500); }

/* Avatars */

.avatar { border-radius: 50%; object-fit: cover; background: var(--paper-sunken); flex: none; border: 1.5px solid var(--paper-raised); box-shadow: 0 0 0 1px var(--line-subtle); }
.avatar-initial { display: flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--ink-900); color: var(--paper); font-weight: 700; flex: none; }
.avatar-initial.outline { background: var(--paper-raised); color: var(--ink-900); border: 1.5px solid var(--ink-900); }
.avatar-group { display: flex; }
.avatar-group .avatar, .avatar-group .avatar-initial { margin-left: -10px; }
.avatar-group .avatar:first-child, .avatar-group .avatar-initial:first-child { margin-left: 0; }
.avatar-group .more { width: 34px; height: 34px; border-radius: 50%; background: var(--paper-raised); border: 1.5px solid var(--ink-900); color: var(--ink-900); font-size: 11px; font-weight: 700; display: flex; align-items: center; justify-content: center; margin-left: -10px; }