/* Role tags (README "Role tags", A-02): 26px, 12px/700, 12px icon. Admin dark, Director sage. */
@layer components {
  .role-tag {
    display: inline-flex;
    flex: none;
    align-items: center;
    gap: 6px;
    height: 26px;
    padding: 0 11px;
    border-radius: var(--radius-pill);
    background: var(--color-neutral-200);
    color: var(--color-neutral-800);
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
  }
  .role-tag .icon { font-size: 12px; }
  .role-tag--admin { background: var(--color-text); color: var(--color-bg); }
  .role-tag--director { background: var(--color-accent-2-200); color: var(--color-accent-2-900); }
}